CSS의 의사 클래스 선택기란 무엇입니까? 의사 클래스 선택자에 대한 간략한 소개

이 장에서는 CSS의 의사 클래스 선택기가 무엇인지 설명합니다. 의사 클래스 선택기에 대한 간략한 소개입니다. CSS에서 의사 클래스 선택자의 역할, CSS 의사 클래스 선택자의 분류 및 기타 지식을 모든 사람이 이해할 수 있도록 하십시오. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. (관련 권장 사항: "CSS Tutorial")

1. 의사 클래스 선택자 소개

의사 클래스 선택자(이하: 의사 클래스)는 콜론으로 정의됩니다. 클릭 누름, 클릭 완료 등과 같은 요소의 상태, 스타일은 의사 클래스를 통해 요소의 상태에 맞게 수정될 수 있습니다.

Pseudo-class의 기능은 일반 DOM의 요소 스타일과 유사하지만 일반 DOM의 요소 스타일과 달리 DOM 내용을 변경하지 않습니다. 일부 수정된 요소를 삽입하면 이러한 요소는 사용자에게 표시되지만 DOM에는 표시되지 않습니다. 의사 클래스의 효과는 실제 클래스를 추가하여 얻을 수 있습니다.

의사 클래스란 무엇인가요?

CSS의 내장 클래스입니다. CSS 자체가 일부 기능을 제공합니다. 즉, class=... 또는 id=...가 필요하지 않습니다. 물론 직접 사용할 수도 있습니다. a:link{color:#FF0000;}

2. 의사 클래스 선택기 분류

Pseudo- 클래스 선택기는 주로 동적 의사 클래스 선택기, UI 요소 상태 의사 클래스 선택기, 구조 의사 클래스 선택기, 부정 의사 클래스 선택기로 나눌 수 있습니다.

이러한 카테고리의 선택기 구문은 아래에 자세히 소개되어 있습니다.

1. 동적 의사 클래스 선택기 구문

• E:link(링크 의사 클래스 선택기): 일치하는 E 요소를 선택하고, 요소가 정의되었습니다. 하이퍼링크를 방문하지 않았습니다. 링크 그리기 포인트에서 흔히 사용되는

• E:visited (링크 의사 클래스 선택기): 일치하는 E 요소를 선택하고, 일치하는 요소를 하이퍼링크로 정의하여 방문했습니다. 링크 그리기 포인트에서 자주 사용됩니다

• E:active (사용자 행동 선택기): 일치하는 E 요소를 선택하면 일치하는 요소가 활성화됩니다. 링크 스트로크 및 버튼에 일반적으로 사용됨

• E:hover(사용자 동작 선택기): 일치하는 E 요소를 선택하면 사용자의 마우스가 E 요소에 유지됩니다. IE6 이하 브라우저는 a:hover

• E:focus(사용자 행동 선택기)만 지원합니다. 일치하는 E 요소를 선택하면 일치하는 요소가 포커스를 받습니다.

동적 의사 클래스 선택기를 하이퍼링크 a In에 사용할 수 있습니다. 태그 적용:

a 태그에는 다음과 같이 4개의 의사 카테고리(4개 상태에 해당)가 있습니다.

• :link "링크": 하이퍼링크를 클릭하기 전

• :visited "Visited": 이후 링크를 방문했습니다

• :hover "hover": 마우스가 라벨 위에 있을 때

• :active "활성화": 마우스가 라벨을 클릭했지만 놓지 않을 때.

코드 예:

/*让超链接点击之前是红色*/
a:link {color: red;}

/*让超链接点击之后是橙色*/
a:visited {color: orange;}

/*鼠标悬停，放到标签上的时候是绿色*/
a:hover {color: green;}

/*鼠标点击链接，但是不松手的时候*/
a:active {color: black;}

a 태그의 4개 의사 클래스 선택자에는 특정 순서가 있습니다. 각 스타일 간의 순서는 매우 구체적입니다. 배열 오류가 발생하면 덮어쓰기가 발생할 수 있습니다. 그 중 하나에서는 스타일을 표시할 수 없습니다. 그렇다면 a 태그의 이 네 가지 가상 클래스 선택자를 사용하려면 어떻게 정렬해야 할까요?

CSS 정의에서 a:hover는 a:link 및 a:visited 뒤에 배치되어야 효과적이며, a:active는 a:hover 뒤에 배치되어야 효과적입니다.

따라서 a 태그의 4개 의사 클래스 선택기 순서는 다음과 같습니다: a:link, a:visited, a:hover, a:active

2.UI 요소 상태 의사 클래스 선택기

• E:checked(확인된 상태 의사 클래스 선택기): 선택한 확인 버튼 또는 라디오 버튼 양식 요소와 일치

• E:enabled(활성화된 상태 의사 클래스 선택기): 활성화된 모든 양식 요소와 일치

• E: 비활성화됨(비활성화 상태 의사 클래스 선택기): 비활성화된 모든 양식 요소와 일치

UI 요소 상태 의사 클래스 선택기는 주로 HTML의 양식 요소에서 작동하는 데 사용됩니다. 가장 일반적인 것은 "type= "text"입니다. 활성화 및 비활성화라는 두 가지 상태가 있습니다. 전자는 쓰기 가능하고 후자는 사용할 수 없습니다. 또한 "type="radio" 및 "type="checkbox""에는 "선택됨"과 "선택 해제됨"이라는 두 가지 상태가 있습니다. 두 가지 예를 살펴보겠습니다. 예를 들어 "비활성화" 텍스트 상자를 다른 텍스트 상자와 구별하려면 다음과 같이 사용할 수 있습니다.

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

참고: IE6-8은 ":checked", "를 지원하지 않습니다. 활성화" , ":비활성화" 이 세 가지 선택기가 있습니다.

3. 구조적 의사 클래스 선택기

• E:fisrt-child: 요소 E는 상위 요소의 첫 번째 하위 요소입니다. E:nth-child(1)

  과 동일합니다.

• E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同    

• E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同    

• E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.    

• E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同    

• E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素    

• E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素    

• E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同    

• E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同    

• E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素    

• E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素    

• E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点    

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

结构伪类选择器很容易遭到误解，需要特别强调。如：

p:first-child;

它表示的是：选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

注意：

结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

4.否定伪类选择器

E:not(F)：匹配所有除元素F外的E元素

例：对form中所有input加边框，但又不想submit也起变化，就可以这样写：

input:not([type="submit"]) {border: 1px solid red;}

위 내용은 CSS의 의사 클래스 선택기란 무엇입니까? 의사 클래스 선택자에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!