CSS 상속을 방지하려면 어떻게해야합니까?

내 사이드 ​​바에 중첩 된 목록 (<ul> 및 <li> 태그)을 사용하는 계층 적 탐색 메뉴가 있습니다. 이미 목록 항목에 대한 스타일이있는 미리 만들어진 테마를 사용하고 있지만 최상위 항목의 스타일을 변경하고 싶지만 하위 항목에는 적용하지 않습니다. 스타일을 하위 목록 항목으로 계단식으로 나열하지 않고 최상위 목록 항목 태그에 스타일을 적용하는 쉬운 방법이 있습니까? 하위 항목에 재정의 스타일을 명시 적으로 추가 할 수 있다는 것을 이해하지만 "이 스타일을이 클래스에 적용하고 캐스케이드하지 마십시오"라고 말하는 쉬운 방법이 있다면 해당 스타일 코드를 모두 복제하지 않아도됩니다. 모든 하위 요소에 적용됩니다. " 내가 사용하는 HTML은 다음과 같습니다.

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

CSS의이 스타일을 가지고 그래서 #sidebar ul및 #sidebar ul li이미를,하지만 난에 추가 스타일을 추가 할 #sidebar .top-level-nav하위 아이들에게 아래로 계단식으로하지 않습니다. 이 작업을 간단히 수행 할 수있는 방법이 있습니까? 아니면 모든 스타일을 재정렬하여 현재 사용중인 스타일이 #sidebar ul특정 클래스에만 적용되도록해야합니까?

아직 부모 선택자가 없으므로 (또는 Shaun Inman이이 를 한정된 선택 자라고 부름 ), 부모 목록 항목의 스타일을 재정의하려면 자식 목록 항목에 스타일을 적용해야합니다.

Cascading은 Cascading Style Sheets의 전체 요점이므로 이름입니다.

하위 선택기를 사용하거나

그래서 사용

#parent > child

스타일을 적용 할 첫 번째 수준의 자식 만 만듭니다. 불행히도 IE6는 자식 선택기를 지원하지 않습니다.

그렇지 않으면 사용할 수 있습니다

#parent child child

한 수준 이상 아래에있는 어린이에게 다른 특정 스타일을 설정합니다.

CSS3 상속 모듈all 에서 호출되는 속성이 있습니다 . 다음과 같이 작동합니다.

#sidebar ul li {
  all: initial;
}

2016-12 년 현재 IE / Edge 및 Opera Mini를 제외한 모든 브라우저 가이 속성을 지원합니다.

* 선택기 를 사용하여 하위 스타일을 기본값으로 다시 변경할 수 있습니다.

예

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

iframe으로 래핑하면 상위 CSS가 더 이상 사용되지 않습니다.

짧은 대답은 : 아니요, CSS 상속을 방지 할 수 없습니다. 상위에 설정된 스타일 만 재정의 할 수 있습니다. 사양 참조 :

HTML 문서의 모든 요소는 부모 html가없는 루트 요소 ( )를 제외하고 부모로부터 상속 가능한 모든 속성을 상속합니다 . - W3C

상속 된 모든 속성을 재정의하는 것과는 별개입니다. initial예를 들어 키워드 를 사용할 수도 있습니다 color: initial;. all예를 들어 all: initial;모든 속성을 한 번에 재설정 하는와 함께 사용할 수도 있습니다 . 예:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

Can I use 에 따른 브라우저 지원 테이블 ...

• all (현재 IE와 Edge는 모두 지원되지 않으며 다른 것들은 좋습니다)
• initial (현재 IE에서 지원되지 않음, 다른 것들은 좋습니다)

경우에 따라 직접 자식 선택기> 를 사용하면 유용 할 수 있습니다 . 예:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

경계 스타일은 상속되지 않은 속성 <li>과 마찬가지로 직계 자식에만 적용되었습니다 border. 그러나 텍스트 색상은 모든 어린이에게 적용되었습니다.color 상속 된 속성 .

따라서 >선택자는 상속을 방지 할 때 상속되지 않는 속성에만 유용합니다.

jQuery와 같은 것을 사용하여이 동작을 "비활성화"할 수 있지만 CSS 및 자바 스크립트에서 디스플레이 로직을 얻을 때 좋은 솔루션이라고는 거의 생각하지 않습니다. 그래도 요구 사항에 따라 jQuery의 CSS 유틸리티는 특히 IE6에서 작동하도록 만들려는 경우 해키 CSS를 사용하는 것보다 삶을 더 쉽게 만듭니다.

예를 들어 XHTML 문서에 두 개의 div가있는 경우.

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

그런 다음 CSS에서 시도하십시오.

#div1 > #div2 > p{
    color: red;
}

'div2'단락에만 영향을 미칩니다.

#div1 > p {
    color: red;
} 

'div1'단락에만 영향을 미칩니다.

에 대한 클래스 참조가 필요하지 않습니다 li. CSS 대신

li.top-level-nav { color:black; }

당신은 쓸 수 있습니다

ul#sidebar > li { color:black; }

이렇게하면 li사이드 바에서 바로 내려 오는 s 에만 스타일이 적용됩니다 ul.

"#sidebar ul li"선택기에서 기본값으로 다시 설정하십시오.