2012-11-24 4 views
2

는 CSS는 이와 같은 상황에 적용 할 패딩 결정 않습니다 어떻게 https://github.com/twitter/bootstrap/blob/master/less/wells.lessCSS는 특수성을 어떻게 처리합니까?

// Base class 
.well { 
    min-height: 20px; 
    padding: 19px; 
    margin-bottom: 20px; 
    background-color: @wellBackground; 
    border: 1px solid darken(@wellBackground, 7%); 
    .border-radius(@baseBorderRadius); 
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 
    blockquote { 
    border-color: #ddd; 
    border-color: rgba(0,0,0,.15); 
    } 
} 

// Sizes 
.well-large { 
    padding: 24px; 
    .border-radius(@borderRadiusLarge); 
} 
.well-small { 
    padding: 9px; 
    .border-radius(@borderRadiusSmall); 
} 

부트 스트랩 트위터에서 다음과 같은 스타일을 가진 <div class="well well-large well-small" />을 고려? 19px, 24px, 9px 또는 정의되지 않은 값입니까? 특이성에 대한 나의 이해는 초보적인 것이며이 경우에 특이성 동점이있는 것으로 보인다. .well .well-large and .well-small

+1

CSS가 형식이 잘못되었습니다 (질문에는 영향을주지 않지만 여전히 그렇습니다) :'blockquote'에 대한 규칙은 다른 규칙 안에 중첩됩니다. 이 코드는 분명히 CSS가 아니지만 Sass, Less 등입니다. –

답변

4

특이성이 동일하면 정의 순으로 적용됩니다.

예 : 당신이 궁금하다면

.a { 
    color: red; 
} 
.b { 
    color: blue; 
} 

<span class="a b">this is blue</span> 
<span class="b a">this is blue</span> 

, here 스타일이 계단식 방법의 규칙이다.