애트리뷰트에는 CSS가 있지만 하위 애트리뷰트에는 CSS가 설정되어 있지 않습니다.

Question

순수 CSS에서 항목의 색상을 변경하는 방법은 있지만 하위 항목은 아닌가요?

의 내가이 범주 트리 있다고 가정 해 봅시다 :

<ul class="my-list sub-has-contents"> 
    <li>No content in this branch 
    <ul> 
     <li>Empty leaf node</li> 
    </ul> 
    </li> 
    <li>No content in this one either</li> 
    <li class="sub-has-contents">There is content in this branch (3 items) 
    <ul> 
     <li class="has-contents">There is some content is this leaf node (1 item)</li> 
     <li class="has-contents">More content here (2 items)</li> 
     <li>Lorem ipsum</li> 
    </ul> 
    </li> 
</ul> 

내용을 관련 몇몇 가지와 잎 노드가 있습니다. 에 스타일을 설정,

http://jsfiddle.net/mvm542e5/

당신이 볼 수 있듯이 : 여기

는 그것의 바이올린입니다

.has-contents { 
    font-weight: bold; 
    color: blue; 
} 
.sub-has-contents { 
    color: blue; 
} 

그리고 파란색과 잎의 내용으로 노드를 볼 수 있습니다 노드는 굵게 표시됩니다. 문제는 콘텐츠가 없지만 부모 'li'의 색상을 상속받는 노드가 있다는 것입니다.

어떻게 노드의 스타일을 설정할 수 있지만 자손은 그대로 둘 수 있습니까?

Answer 1

.sub-has-contents * { 
 
    color:red; 
 
} 
 
.has-contents { 
 
    font-weight: bold; 
 
    color: blue; 
 
} 
 
.sub-has-contents { 
 
    color: blue; 
 
}

<ul class="my-list sub-has-contents"> 
 
    <li>No content in this branch 
 
    <ul> 
 
     <li>Empty leaf node</li> 
 
    </ul> 
 
    </li> 
 
    <li>No content in this one either</li> 
 
    <li class="sub-has-contents">There is content in this branch (3 items) 
 
    <ul> 
 
     <li class="has-contents">There is some content is this leaf node (1 item)</li> 
 
     <li class="has-contents">More content here (2 items)</li> 
 
     <li>Lorem ipsum</li> 
 
    </ul> 
 
    </li> 
 
</ul>

것은 아니, 당신은 속성을 설정할 수 없습니다.

요소에 color이 있으면이 값은 color이 설정되어 있지 않으면 해당 요소의 모든 자식에 의해 상속됩니다. 이것은 CSS 캐스 캐 이드의 아이디어의 일부입니다. 너는 그것을 막을 수 없다. 당신은 그것에 적응할 수 있습니다.

따라서 속성을 상속하지 않아야하는 하위 항목에 속성을 설정해야합니다. 특정 값으로 설정해야합니다. 상속에서 레벨을 건너 뛸 수있는 방법이 없습니다 (예 : 부모가 아닌 조부모로부터 요소를 상속받는 경우).

Answer 2

캔버스에 그림을 그렸던 것처럼 배경색을 먼저 페인트 한 다음 전경색을 추가하려는 경우에 CSS를 배치하는 순서를 명심하고 싶습니다. 이 경우, 기본 색상은 녹색, 그래서 블루 특정 사람을 다음 .SUB-이-내용의 모든 리 녹색 확인하고 :

http://jsfiddle.net/mvm542e5/4/

.sub-has-contents li { 
    color:green; 
} 
.sub-has-contents .has-contents { 
    font-weight: bold; 
    color: blue; 
} 
.sub-has-contents{ 
    color: blue; 
} 

Answer 3

당신이 항목을 보장 할 수있는 경우 내용이있는 클래스는 contents을 포함하는 일부 클래스로 태그가 지정되며 내용이없는 클래스는 클래스가 없습니다. 이 시도 할 수 있습니다 :

.has-contents { 
 
    font-weight: bold; 
 
    color: blue; 
 
} 
 
.sub-has-contents { 
 
    color: blue; 
 
} 
 
.my-list :not([class*="contents"]) { 
 
    color:red; 
 
}

<ul class="my-list sub-has-contents"> 
 
    <li>No content in this branch 
 
    <ul> 
 
     <li>Empty leaf node</li> 
 
    </ul> 
 
    </li> 
 
    <li>No content in this one either</li> 
 
    <li class="sub-has-contents">There is content in this branch (3 items) 
 
    <ul> 
 
     <li class="has-contents">There is some content is this leaf node (1 item)</li> 
 
     <li class="has-contents">More content here (2 items)</li> 
 
     <li>Lorem ipsum</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 4

는 당신은 다른 스타일을 부정하는 모든 자손 요소에 선택기를 적용 할 수 있습니다. 문제가 정의에 의해 상속되지 않을 때 그것은 물론 제외하고, 상속에서 제외 될 수 있도록