CSS 텍스트 장식 상속은 하위 요소와 어떻게 작동합니까?

CSS 텍스트 장식 속성 재정의 문제

HTML 및 CSS에서 텍스트 장식 속성은 다음과 같은 장식을 추가하거나 제거하는 데 사용됩니다. 밑줄이나 취소선으로 텍스트 요소에 표시됩니다. 그러나 하위 요소에 자체 텍스트 장식 속성이 포함된 경우 하위 속성이 상위 요소에서 상속된 속성을 재정의할 수 있는지 여부에 대한 문제가 발생합니다.

다음 CSS 예를 고려하세요.

a {
    text-decoration: underline;
}

span {
    text-decoration: none;
}

이 경우 요소는 부모 대신 자체 텍스트 장식을 적용합니다. 없음; 값. 이러한 결과는 부모 요소와 자식 요소 모두에 text-장식 속성이 지정되었기 때문에 예상되는 결과입니다.

CSS 텍스트 장식 사양에 따르면 자식 요소의 text-장식 속성은 텍스트 장식 속성에 어떤 영향도 미칠 수 없습니다. 조상의 장식. 이는 하위 요소의 값에 관계없이 상위 요소의 텍스트 장식이 항상 적용된다는 것을 의미합니다.

링크된 질문은 또한 "인라인 상자의 텍스트 장식은 전체 요소에 걸쳐 그려집니다"라는 사양의 추가 정보를 제공합니다. , 존재 여부에 전혀 주의를 기울이지 않고 모든 하위 요소를 탐색합니다." 이는 상위 요소의 텍스트 장식이 모든 하위 요소를 포함하여 전체 인라인 상자에 항상 적용된다는 것을 의미합니다.

이후 CSS 버전(2.1 이후)에서는 다음 문제를 해결하기 위해 text-장식-건너뛰기 속성이 도입되었습니다. 이 문제. 자식 요소에 text-장식-건너뛰기: 건너뛰기를 설정하면 부모 장식이 자식 콘텐츠를 건너뛰도록 할 수 있습니다.

결론적으로, 자식 요소가 텍스트 장식 속성을 재정의할 수 없습니다. 사양의 디자인. 요소의 특정 부분에 대한 텍스트 장식을 제어하려면 이후 CSS 버전에서 text-꾸밈-건너뛰기 속성을 사용할 수 있습니다.

위 내용은 CSS 텍스트 장식 상속은 하위 요소와 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!