나는 CSS 스타일의 계단식에게

Question

을 제한 할 필요가 나는 다음과 같은 HTML이 : 여기

<div class="canvas red"> 
    <div> 
     <div class="canvas blue"> 
      <div> 
       has blue border 
       <div class="canvas red"> 
        ... 
        <div> 
        MUST HAVE RED BORDER 
        </div> 
       </div>   
      </div> 
     </div> 
    </div> 
</div> 

및 CSS 코드입니다 :

div.canvas div { 
    border-style: solid; 
    border-width: 1px; 
} 

div.canvas.red div { 
    border-width: 4px; 
    border-color: red; 
} 

div.canvas.blue div { 

    border-color: blue; 
} 

문제는 3입니다

• 가장 안쪽에있는 div.canvas.red div은 내부에 있기 때문에 blue 경계를받습니다. 가장 내부의 div.canvas.red div이 div.canvas.blue에 의해 왜곡되지 않도록이 CSS 상속을 중단해야합니다.

• 동적으로 웹 페이지에 구성 요소를 삽입하기 때문에 div 위의 중첩을 제어 할 수 없습니다. 내가 처리해야하는 다양한 중첩 시나리오가있을 수 있습니다. 대신 canvas_red 및 canvas_blue 같은 다른 클래스를 필요없이, 별도의 클래스 이름 인 canvas 및 red/blue 등처럼 -

• 은 내가 CSS 구조가 적용되는 방식을 변경하지 않아야합니다.

---

나는 그러므로 내 CSS에 > 토큰을 사용할 수 있습니다, IE6를 지원하지 않을 계획. 그러나 제대로 활용할 수 없었습니다. 내가 더 적절하게 그것을 사용하여 내 코드를 변경하면 나는 apreciate거야.

Answer 1

그러므로 나는 내 CSS에 > 토큰을 사용할 수 있습니다, IE6를 지원하지 않을 계획. 그러나 제대로 활용할 수 없었습니다. 내가 더 적절하게 그것을 사용하여 내 코드를 변경하면 나는 apreciate거야.

이 당신을 위해 무엇을 찾고있는 사람이어야한다 :

div.canvas > div { 
    border-style: solid; 
    border-width: 1px; 
} 

div.canvas.red > div { 
    border-width: 4px; 
    border-color: red; 
} 

div.canvas.blue > div { 
    border-color: blue; 
} 

가 명심 테두리 스타일이 는 기본적으로 부모로부터 자식 요소에 의해 상속되지 것을. 자손 선택자를 통해 보이는 동작은 선택 자의 동등한 특수성으로 인해 계단식 효과가있을뿐 아니라 자손 선택기 자체의 특성에 따라 중첩 수준을 살펴볼 수 있습니다.

아이 선택기 >는 특이성을 증가하지 않지만, 결과 스타일이 다를 수 있습니다 이유는 단 하나의 레벨 (즉 div.canvas.blue > div이 <div class="canvas blue"><div><div>에서 가장 안쪽의 요소를 일치하지 않을 수 있습니다)에 중첩 깊이를 제한 않습니다.

Answer 2

 
div.canvas, 
div.canvas div { 
    border-style: solid; 
    border-width: 1px; 
} 

div.canvas.red { 
    border-width: 4px; 
    border-color: red; 
} 

div.canvas.blue { 
    border-color: blue; 
}