CSS 특이성 규칙

트위터 부트 스트랩 (TB)을 사용하고있어 야 할 때 CSS 규칙이 우선시되는 것처럼 보입니다. 내가 특이성에 대해 이해하는 것과CSS 특이성 규칙

HTML

<div class="teaser"> 
    <h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1> 
</div>

CSS (플러스 트위터 부트 스트랩에 대한 외부 링크)

div.teaser h1.teaserText { 
    font-size: 100px; 
    font-weight: 100; 
    color: black; 
    line-height: 90px; 
    font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial"; 
    text-transform: uppercase; 
} 

div.teaser h1.teaserText label { 
    color: #FCCE00; 
}

: 나는 문제를 보여주기 위해이 바이올린을 만들어 규칙에서, TB의 label에 정의 된 규칙은 html selector가 1의 값을 가지므로 1의 값만 가져야합니다. I ha 이후 23 개의 값을 가져야합니다. 3 개의 html 선택자와 2 개의 클래스 선택자가 각각 10의 값을 가져야합니다. TB css 정의의 레이블 선택기가 우선 적용되지만 바이올린에서 볼 수 있듯이.

내가 여기에없는 것을 설명 할 수 있습니까?

BTW,! important 태그를 사용하여이 문제를 해결할 수 있음을 알고 있습니다. CSS 특성 규칙을 더 잘 이해하려고합니다.

CSS 특이성 두 개 이상의 규칙 주어진 요소에 대한 하나 개의 CSS 속성에 대한 가있을 때 발생하는 결정 :

출처

2012-12-13 Kevin

내가 혼란 스러워요 TB는 다음과 같은 규칙 글꼴 크기 및 라인 높이를 우선합니다. 분명히 두 번째 스타일은 더 구체적입니다. 마지막에 추가로 "label"이있는 스타일이 똑같습니다. – gotohales

먼저 당신이 기대하는 바를 알아야합니다.필자가 볼 때 텍스트 텍스트 텍스트는 검정색이며 100px 크기라는 것입니다. 레이블 및 활동은 일반적인 글꼴 크기 및 노란색입니다. 즉, 글꼴 모음, 텍스트 변환 및 색상을 선택합니다. –

"이 문제를 해결하기 위해'! important' 태그를 사용할 수 있다는 것을 알고 있습니다. - 내 코드에서는 그렇게 할 수 없습니다. 또한'! important'는 태그가 아니기 때문에 여기에 어떤 변화도 없을 것이라고 생각합니다. –

특수 규칙은 다른 요소가 타겟팅 된 경우 (해당 요소의 일부 스타일이 상속 될지라도) 다른 규칙이 ** 동일한 요소를 타겟팅하는 경우에만 적용됩니다 (라벨의 색상과 동일).

레이블에 적용된 하나의 스타일러스가 있는데,이 스타일러가 올바르게 적용됩니다. 다른 모든 스타일은 다른 요소에 적용되므로 레이블을 직접 타겟팅하는 TB 스타일이 선호됩니다.

일부 스타일은 상속되며 (예 : font-size 및 line-height), 요소를 직접 타겟팅하는 규칙이 있으면 바로 무시됩니다.

label, input, button, select, textarea { 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 20px; 
}

당신은 선언에 의해 쉽게이 문제를 해결할 수 :

div.teaser h1.teaserText label { 
    color: #FCCE00; 
    font-size:inherit; 
    line-height:inherit; 
    /* and so on */ 
}

출처

2012-12-13 16:34:18 Christoph

"특정 규칙은 다른 규칙이 동일한 요소를 대상으로하는 경우에만 적용됩니다."정확합니다. – BoltClock

난 당신이 문제가 있다고 생각하지만, 추측을 복용 무엇에 정확하게 명확하지 않다.

<label class="myLabel">Hello!</label>

그리고이 CSS : .myLabel이 label보다 구체적인 선택이기 때문에 라벨, 블루 될 것

label { 
    color: red; 
    font-size: 24px; 
} 

.myLabel { 
    color: blue; 
}

그래서,이 HTML을 부여.

그러나 .myLabel 블록에는 font-size 속성을 설정하는 규칙이 없으므로 레이블의 글꼴 크기는 24 픽셀입니다.

출처

2012-12-13 16:32:10

CSS 특이성 규칙

답변

관련 문제