내 CSS `text-장식: 없음;`이 중첩된 요소를 재정의하지 않는 이유는 무엇입니까?

CSS 텍스트 장식 재정의 문제 해결

텍스트 장식 속성을 재정의하지 않는 CSS 코드에 대한 우려는 많은 사람들이 직면하는 일반적인 문제입니다. 프로그래머. 문제를 자세히 살펴보고 해결책을 찾아보겠습니다.

문제를 이해하는 열쇠는 글꼴 두께와 같은 다른 글꼴 관련 속성과 다른 텍스트 장식의 동작에 있습니다. 텍스트 장식을 적용하면 구체성과 관계없이 모든 중첩 요소에 영향을 미칩니다. 이는 W3C 사양에 설명되어 있습니다.

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

코드에서 텍스트 장식: 없음; 밑줄을 방지해야 하는 규칙은 u 클래스가 있는 li 요소에 적용됩니다. 그러나 텍스트 장식은 중첩된 요소에도 영향을 미치기 때문에 밑줄은 u 클래스가 있는 중첩된 li 요소에 남아 있습니다.

이 문제를 해결하려면 CSS 특수성과 중첩을 조합하여 사용할 수 있습니다.

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: line-through; /* Apply a different line-through style */
}
ul > li > ul > li.u {
    text-decoration: underline;
}

이 접근 방식을 사용하면 외부 li 요소에 영향을 주지 않고 중첩된 li 요소에 선 통과 스타일이 적용됩니다. 또는 상속 속성을 명시적으로 활용하여 중첩된 요소에 대한 텍스트 장식을 설정할 수도 있습니다.

ul > li > ul {
    text-decoration: inherit;
}

CSS 문제를 해결할 때 속성의 작동 방식과 특수성 규칙을 이해하면 효과적인 문제를 찾는 데 도움이 될 수 있습니다. 솔루션.

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