programing

인라인 스타일이 있는 CSS 유사 클래스

testmans 2023. 9. 27. 17:06
반응형

인라인 스타일이 있는 CSS 유사 클래스

인라인 스타일을 이용한 유사 수업이 가능한가요?


예:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

위의 HTML이 작동하지 않는 것은 알고 있지만 비슷한 것이 있습니까?

추신. 저는 외장 스타일 시트를 사용해야 한다는 것을 알고 있습니다.인라인 스타일로 할 수 있는지 궁금했어요.

아니요, 이건 불가능합니다.CSS를 사용하는 문서에서 인라인.styleattribute는 속성 선언만 포함할 수 있으며 스타일시트의 각 규칙 집합에 나타나는 것과 동일한 문 집합을 포함할 수 있습니다.Style Attributes 규격에서:

스타일 속성의 값은 CSS 선언 블록의 내용 구문과 일치해야 하며, 형식 문법은 CSS 코어 문법의 용어와 규약에서 아래에 나와 있습니다.

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

선택기(의사 요소 포함), 규칙 또는 기타 CSS 구성은 허용되지 않습니다.

일부 익명의 초특정 ID 선택기에 적용되는 스타일을 인라인 스타일로 생각해 보십시오. 이러한 스타일은 해당 요소에만 적용됩니다.style기여하다.(요소에 ID가 있는 경우 스타일시트의 ID 선택자보다 우선합니다.)이는 속성이 유사 클래스 또는 유사 요소 스타일을 지원하지 않는 이유를 이해하는 데 도움이 될 뿐입니다.(이는 유사 클래스 및 유사 요소가 문서 언어로 표현할 수 없는 문서 트리의 추상화를 제공하는 방법과 더 관련이 있습니다.)

인라인 스타일은 규칙 집합에서 선택자와 동일한 캐스케이드에 참여하며 캐스케이드에서 가장 높은 우선 순위를 가집니다.!important여하튼)그래서 그들은 심지어 사이비 계급 국가들보다 우선합니다.의사 클래스 또는 인라인 스타일의 다른 선택기를 허용하면 새로운 캐스케이드 레벨이 도입될 가능성이 있으며 이로 인해 새로운 일련의 복잡성이 발생합니다.

또한 스타일 속성 사양의 매우 오래된 개정판에서는 원래 이를 허용할 것을 제안했지만, 아마도 위에 제시된 이유로 또는 실행 가능한 옵션이 아니기 때문에 폐기되었습니다.

CSS가 아니라 인라인:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

예제 → 참조

인라인이 필요하지 않고 내부 CSS를 사용할 수 있습니다.

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

다음을 가질 수 있습니다.

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

https://hacss.io 을 사용해 볼 수 있습니다.

<a href="http://www.google.com" class=":hover{text-decoration:none;}">Google</a>

데모

언급URL : https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles

반응형