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

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상속 된 속성 과 마찬가지로 텍스트 색상이 모든 자식에 적용되었습니다 .

Therefore, > selector would be only useful with non-inherited properties, when it comes to preventing inheritance.

---

You could use something like jQuery to "disable" this behaviour, though I hardly think it's a good solution as you get display logic in css & javascript. Still, depending upon your requirements you might find jQuery's css utils make life easier for you than trying hacky css, especially if you're trying to make it work for IE6

---

For example if you have two div in XHTML document.

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

Then try this in CSS.

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

affect only 'div2' paragraph.

#div1 > p {
    color: red;
} 

affect only 'div1' paragraph.

---

You don't need the class reference for the lis. Instead of having CSS like

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

you can write

ul#sidebar > li { color:black; }

This will apply the styling only to lis that immediately descend from the sidebar ul.

---

just set them back to their defaults in the "#sidebar ul li" selector

참고URL : https://stackoverflow.com/questions/958170/how-do-i-prevent-css-inheritance