CSS - 첫 번째 클래스 집합 만 선택하십시오.

Question

클래스의 첫 번째 집합 만 선택하고 CSS를 적용하는 방법을 알아 내려고합니다. 코드에서

I 클래스와 DIV 년대의 첫 번째 집합에 색상을 적용하기 위해 노력하고있어 아래 .item

<div class="field-items"> 
    <div class="item">This text should be red</div> 
    <div class="item">This text should be red</div> 
    <div class="field-items"> 
     <div class="item">This text should NOT be red</div> 
     <div class="item">This text should NOT be red</div> 
     <div class="item">This text should NOT be red</div> 
     <div class="item">This text should NOT be red</div> 
    </div> 
    <div class="item">This text should be red</div> 
    <div class="item">This text should be red</div> 
</div> 

문제는 .item DIV 년대의 두 번째 세트는 점이다 또한 색깔을 얻는 : 빨강; css. nth-child, : nth-of-type,>, + 등의 셀렉터를 가지고 놀았지만 어떻게해야하는지 알 수 없습니다.

제가 지금 생각해 볼 수있는 가장 좋은 점은 두 번째 세트의 CSS를 무시하는 것입니다.

.item { 
    color: #cc3333;  
} 
.item .item { 
    color: #000; 
} 

도움을 주시면 감사하겠습니다.

Answer 1

최상위 레벨 .field-items의 상위 요소를 찾아서 > 결합 자와 함께 선택기에 연결해야합니다. 예를 들어 부모 요소는 .parent 경우 : 당신은 또한 .field-items가 .item 자녀가 둘 .field-items, 중첩이 있기 때문에

.parent > .field-items > .item { 
    color: #cc3333; 
} 

혼자 .field-items > .item 사용이 충분하지 않습니다. 여기

Answer 2

클래스

.field-items:first-child > .item{color:red;}