CSS 선택기 소개

CSS 선택기 소개

태그 선택기

예:

`p`、`a`、`h[1,6]`、`span`、`div`、、、

클래스 선택기(클래스)

클래스 선택기는 "."으로 정의됩니다.

예:

.id1{样式属性：值;}

밑줄을 사용하지 마세요. 호환성 문제가 발생할 수 있으므로 밑줄은 일반적으로 JS에서 사용되며 순수한 숫자나 중국어 이름을 사용하지 마세요.

예:

<div class="class1"></div>

참고:

클래스 선택기에는 다중 클래스 이름 선택기도 포함됩니다

<div class="class1 class2.."></div>

(권장 동영상 튜토리얼: css 동영상 튜토리얼)

ID 선택기

id 선택기는 " #으로 시작합니다. "라고 정의합니다. 예: #id1{style attribute: value;} 클래스 선택기

와 같은 명명 방법예:

<div id="id1"></div>

wildcard selector

*{样式属性：值;}

pseudo-class selector

link pseudo-class 선택기(주로 a 태그는 생략할 수 있지만 순서는 바꿀 수 없습니다.)

:link  /*未访问的链接*/:visited  /*已访问的链接*/:hover  /*鼠标移动到链接上*/     
最常用的链接伪类选择器:active  /*选定的链接 别松开的状态*/

구조(위치) 의사 클래스 선택자 CSS3

:first-child 상위 요소의 첫 번째 하위 요소에 속하는 지정된 선택자를 선택합니다

:last-child 상위 요소의 마지막 하위 요소에 대해 지정된 선택기를 선택합니다.

:nth-child(N)는 요소 유형에 관계없이 상위 요소의 N번째 하위 요소인 모든 요소와 일치합니다. 마지막 하위 요소에서. N은 숫자, 키워드 또는 공식일 수 있습니다

키워드: 홀수는 홀수, 짝수는 짝수입니다

표현: 2n 짝수 2n+1 홀수 n은 배수입니다

: nth-last-child()는 마지막 하위 요소부터 시작 번호의 기본값은 첫 번째 요소입니다

대상 의사 클래스 선택기

:대상 대상 의사 클래스 선택기 선택기는 현재 활성 대상 요소를 선택하는 데 사용할 수 있습니다

하위 요소 선택기

하위 요소 선택기만 해당 요소의 하위 요소를 선택하는 기능입니다.

글쓰기:

부모가 앞에 있고 하위 집합이 뒤에 있으며 >는 중간에 연결하는 데 사용됩니다.

참고: > 손자와 자손 집합을 제외하고 양쪽에 공백이 있어야 합니다. , 그러나 아들 세트는 >를 사용하지 않으면 모든 자손을 선택할 수 있습니다

속성 선택기

특정 특수 속성을 가진 선택기는 속성 선택기를 사용할 수 있습니다

쓰기: a[제목] {} 속성 선택기는 사각형으로 표시됩니다. 괄호 div[class^ =font] { } div[class$=font] { } 글꼴로 시작 div[class*=tao] { } 글꼴로 끝나는 것은 tao가 어느 위치에나 있을 수 있음을 의미합니다.

의사 요소 선택기(CSS3)

.dome 클래스 선택기: 첫 번째 하위 의사 클래스 선택기::first-letter 의사 요소 선택기

E::first-letter 텍스트의 첫 번째 단어 또는 word

E::first-line 텍스트의 첫 번째 줄

E::selection은 선택한 텍스트의 스타일을 변경할 수 있습니다(마우스)

E::before{ content: "text" } 상자 전면( 글꼴 추가)

E::after{ content: "text" } 상자 뒤에(글꼴 추가)

관련 기사