인라인 스타일의 CSS 의사 클래스

인라인 스타일을 사용하여 의사 클래스를 가질 수 있습니까?

예:

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

위의 HTML이 작동하지 않지만 비슷한 기능이 있습니까?

추신 : 나는 외부 스타일 시트를 사용해야한다는 것을 알고 있습니다. 이것이 인라인 스타일을 사용하여 수행 할 수 있는지 궁금했습니다.

아니요, 불가능합니다. CSS를 사용하는 문서에서 인라인 style속성은 속성 선언 만 포함 할 수 있습니다. 스타일 시트의 각 규칙 세트에 나타나는 동일한 명령문 세트 로부터 스타일 사양 속성 :

style 속성의 값은 CSS 선언 블록 의 내용 구문 (구 괄호 제외) 과 일치해야하며 형식 문법은 CSS 핵심 문법 의 용어와 규칙에 아래에 나와 있습니다 .

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

선택자 (의사 요소 포함) 나 at-rule 또는 다른 CSS 구성은 허용되지 않습니다.

인라인 스타일은 익명의 슈퍼 특정 ID 선택기에 적용되는 스타일로 생각하면됩니다. 이러한 스타일은 style속성 이있는 하나의 요소에만 적용됩니다 . (요소에 해당 ID가있는 경우 스타일 시트에서 ID 선택기보다 우선합니다.) 기술적으로는 그렇게 작동하지 않습니다. 이것은 속성이 의사 클래스 또는 의사 요소 스타일을 지원하지 않는 이유를 이해하는 데 도움이됩니다. 의사 클래스와 의사 요소가 표현할 수없는 문서 트리의 추상화를 제공하는 방법과 더 관련이 있습니다. 문서 언어).

인라인 스타일은 규칙 세트의 선택기와 동일한 계단식에 참여하며 계단식에서 가장 우선합니다 ( !important그럼에도 불구하고). 따라서 의사 클래스 상태보다 우선합니다. 의사 클래스 나 인라인 스타일의 다른 선택기를 허용하면 새로운 계단식 수준과 새로운 합병증이 발생할 수 있습니다.

Style Attributes 스펙의 매우 오래된 개정판 은 원래 이것을 허용하는 것을 제안 했지만, 아마도 위에 주어진 이유로 또는 구현이 실행 가능한 옵션이 아니기 때문에 폐기되었습니다.

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>

데모