`text-꾸밈: 없음`이 중첩된 CSS 요소의 텍스트 장식을 항상 제거하지 않는 이유는 무엇입니까?

CSS 텍스트 장식 재정의 이해

CSS에서 text-장식 속성을 사용하면 밑줄 또는 밑줄과 같은 텍스트 효과를 추가하거나 제거할 수 있습니다. 취소선. 그러나 텍스트 장식을 제거하려는 재정의 시도가 효과적이지 않은 상황이 발생할 수 있습니다. 이는 텍스트 장식이 글꼴 가중치와 같은 다른 텍스트 스타일 속성과 다르게 동작하기 때문입니다.

중첩 요소 전파

이 동작을 이해하는 열쇠는 다음의 전파에 있습니다. 텍스트 장식 스타일. 요소에 텍스트 장식을 적용하면 해당 요소뿐만 아니라 그 안에 있는 모든 중첩 요소에도 영향을 미칩니다. 즉, 상위 요소에 text-장식: 없음을 설정하면 상위 요소 자체의 장식만 제거되지만 모든 하위 요소는 상위 요소의 장식을 상속합니다.

예

제공된 예에는 다음 CSS가 있습니다.

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

그리고 다음도 있습니다. HTML:

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

이 CSS를 HTML에 적용하면 텍스트 장식을 명시적으로 설정했더라도 중첩된 목록 항목(

내의
• )도 텍스트 장식을 받게 됩니다. 해당 요소에는 없습니다. 이는 상위 li(클래스 "u" 포함)가 텍스트 장식을 하위 요소에 상속하기 때문입니다.

  중첩된 목록 항목에서 장식을 제거하려면 각각에 text-장식: 없음을 지정해야 합니다. 중첩 수준. 이는 다음과 같습니다:

  ul > li {
      text-decoration: none;
  }
  ul > li.u {
      text-decoration: underline;
  }
  ul > li > ul > li {
      text-decoration: none;
  }
  ul > li > ul > li.u {
      text-decoration: none; /* Added */
  }

  추가 고려 사항

  텍스트 장식 전파와 관련하여 브라우저 동작이 달라질 수 있다는 점에 유의하세요. 일부 브라우저는 사양을 더 엄격하게 해석하여 위에 설명된 대로 적용하는 반면, 다른 브라우저는 텍스트 장식을 사용하여 장식을 전파할 수도 있습니다. 하위 요소에는 아무 것도 설정되지 않습니다.

위 내용은 `text-꾸밈: 없음`이 중첩된 CSS 요소의 텍스트 장식을 항상 제거하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!