CSS 클래스 우선 순위

Question

오늘 문제가 발생한 후 CSS 클래스의 우선 순위에 대한 질문이 있습니다. 상황은 다음과 같습니다 :

나는 그것에 연관된 클래스가있는 순서가없는 목록이 있습니다. LI 태그에는 정의 된 스타일도 있습니다. 클릭 후 ("selected" 클래스를 통해) LI의 스타일을 변경하고 싶지만 추가 된 클래스의 스타일은 적용되지 않습니다. 이 정상적인 동작입니까, 아니면이 코드가 작동해야합니까?

CSS :

.dynamicList 
{ 
    list-style: none; 
} 

.dynamicList li 
{ 
    display: block; 
    width: 400px; 
    height: 55px; 
    padding: 10px 10px 10px 10px; 
    border: 1px solid #000; 
    background-color: #ff0000; 
} 

.selectedItem 
{ 
    background-color: #0000ff; 
} 

HTML :

<ul class="dynamicList"> 
    <li>First Item</li> 
    <li class="selectedItem">Second (Selected) Item</li> 
</ul> 

가 "selected" 목록 항목의 배경색이 변경되지 않습니다. 나는 LI 요소에 스타일을 적용하지만, 다른 클래스를 생성하고 읽기 수 있도록 모든 목록 항목이 적용되지 않는 경우이

<li class="listitem selectedItem">xxxx</li> 

Answer 1

이 메시지는 CSS specificity처럼 들립니다. 에 .selectedItem 룰을 변경해보십시오 :

.dynamicList li.selectedItem { 
    background-color: #0000ff; 
} 

Answer 2

짧은 대답이 .selectedItem 것입니다 .. 또한 경우입니다 이전 스타일이 더 구체적이어서 우선 순위가 더 높기 때문에 스타일이 적용되지 않습니다. 여기 decent rundown입니다 :

이제

은, 이제 CSS에 대한 내부 우선 순위의 일반적인 목록을 만들어 보자 (3가 우선 순위가 가장 높은) :

element 
.class 
#id 

이 기본 우선 순위입니다. 이 외에도 에서 특이성은 이며, f.ex ul li은 li보다 우선합니다. W3C는 내부 무게를 계산하는 방법을 을 통해 괜찮은 테이블을했다 : 여기

LI   {...} /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   {...} /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL LI  {...} /* a=0 b=0 c=3 -> specificity = 3 */ 
LI.red  {...} /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ 
#list   {...} /* a=1 b=0 c=0 -> specificity = 100 */ 

그리고는 W3C specification입니다.

Answer 3

변경 selectedItem 규칙 : 클리 터스 '우편으로 언급되지 않았다

.dynamicList li.selectedItem 
{ 
    background-color: #0000ff; 
} 

Answer 4

작은 또한.
W3C 링크에 따르면 html 요소/태그에 사용 된 style 속성이 가장 우선 순위가 높습니다.

예. 당신이

<a id= bar style="color: red">foo</a> 

및

<style> 
#bar { 
    color: blue; 
} 
</style> 

이있는 경우 인라인 HTML 스타일이 가장 높은 우선 순위, # 이상을 가지고 있기 때문에 색상이 red 될 것입니다.