CSS에서 텍스트 장식이 올바르게 상속되지 않는 이유는 무엇입니까?

CSS 텍스트 장식 재정의 문제

CSS 속성 계층 구조에서 특정 속성은 상위 요소에서 상속된 속성보다 우선합니다. 그러나 텍스트 장식 속성은 이 규칙에 대한 예외를 나타냅니다.

문제:

다음 코드를 고려하세요.

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

이것에서 알 수 있듯이 [데모](http://jsfiddle.net/5t9sV/), 하위 요소 span의 text-장식 속성은 상위 아 요소.

이유:

CSS 사양에 따르면 하위 요소의

text-장식 속성은 "장식에 어떤 영향도 미칠 수 없습니다. 조상의." 이는 본질적으로 존재하는 하위 요소에 관계없이 텍스트 장식이 전체 요소에 적용된다는 것을 의미합니다.

해결책:

CSS3에는

이라는 속성이 있습니다. 상속된 텍스트 장식을 건너뛰기 위해 하위 요소에 적용할 수 있는 text-장식-skip 그러나 이는 인라인 요소(예: span)에서만 작동하며 지원되는 브라우저는 다를 수 있습니다.

예를 들어

span 요소 내부의 텍스트를 표시하려면 밑줄 없이 다음을 추가할 수 있습니다.

span {
  text-decoration-skip: ink;
}

ink는 하나입니다. 문자, 공백 및 포함된 개체를 포함하는 텍스트 장식 건너뛰기에 가능한 값

위 내용은 CSS에서 텍스트 장식이 올바르게 상속되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!