CSS 텍스트 장식 상속은 어떻게 작동하며, 재정의가 때때로 실패하는 이유는 무엇입니까?

텍스트 장식 상속 이해

CSS에서 텍스트 장식 속성은 텍스트에 적용되는 장식 선 스타일을 제어합니다. 그러나 글꼴 가중치와 같은 다른 텍스트 관련 스타일과 달리 텍스트 장식은 뚜렷하게 동작합니다.

상속된 장식 재정의 문제

다음 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>

설명

문제는 텍스트 장식이 HTML 내의 모든 중첩 요소에 적용된다는 사실에 있습니다. 적용되는 요소입니다. 즉, 중첩된 요소에서 상속된 장식을 재정의하려고 시도하더라도 상속된 장식은 계속 적용됩니다.

CSS 2.1 사양에 따르면 "인라인 상자의 텍스트 장식은 요소 전체에 걸쳐 그려집니다. , 어떤 하위 요소에도 주의를 기울이지 않고 모든 하위 요소를 살펴봅니다. "

해결 방법

이 문제를 해결하려면 다른 접근 방식이 필요합니다. 상속된 장식을 재정의하기 위해 중첩된 선택기에 의존하는 대신 다음과 같은 대체 기술을 사용하세요.

• :before 또는 ::after 의사 요소를 사용하여 장식 선 만들기
• 사용 텍스트 장식 속성을 동적으로 수정하는 JavaScript
• 텍스트 장식 속성에 의존하지 않고 원하는 요소에 직접 텍스트 장식 속성 적용 상속

위 내용은 CSS 텍스트 장식 상속은 어떻게 작동하며, 재정의가 때때로 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!