CSS3에는 어떤 새로운 선택기가 추가되나요?

css3의 새로운 선택기에는 ":first-of-type", ":last-of-type", ":last-child", ":root", ":empty", ":target", "가 포함됩니다. :활성화", ":비활성화", ":유효" 등

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS를 사용하여 HTML 페이지의 요소에 대한 일대일, 일대다 또는 다대일 제어를 구현하려면 CSS 선택기를 사용해야 합니다.

HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다.

CSS 선택기는 스타일을 지정하려는 요소의 패턴을 선택하는 데 사용됩니다.

css3의 새로운 선택자

CSS3의 새로운 선택자는 크게 속성 선택자, 관계 선택자, 구조화된 의사 클래스 선택자, 의사 요소 선택자의 네 가지 범주로 나뉩니다.

1. 속성 선택기

속성 선택기는 웹 페이지 태그의 속성 및 속성 값을 기반으로 태그를 선택할 수 있습니다.

속성 선택기에는 주로 E[att^=value], E[att$=value] 및 E[att*=value]가 포함됩니다. 이 세 가지 성별 선택자가 있습니다. E[att^=value]、E[att$=value]和E[att*=value]这三种性选择器。

2、关系选择器

CSS3中的关系选择器主要包括子代选择器和兄弟选择器。

(1)关系选择器

(2)临近兄弟选择器

(3)普通兄弟选择器

3、结构化伪类选择器

结构化伪类选择器可以减少文档内class属性和id属性的定义，使文档变得更加简洁。

4、伪元素选择器

伪元素选择器一般是一个标记后面紧跟英文冒号“:

2. 관계 선택자

CSS3의 관계 선택자는 주로 자손 선택자와 형제 선택자를 포함합니다. 🎜🎜(1) 관계 선택자🎜🎜(2) 가까운 형제 선택자🎜🎜(3) 일반 형제 선택자🎜🎜🎜3. 구조화된 의사 클래스 선택자🎜🎜🎜구조화된 의사 클래스 선택자는 문서의 내용을 줄일 수 있습니다. 정의 클래스 속성과 ID 속성을 사용하면 문서가 더욱 간결해집니다. 🎜🎜🎜4. 의사 요소 선택기 🎜🎜🎜의사 요소 선택기는 일반적으로 표시 뒤에 영어 콜론 ":"이 오고, 영어 콜론 뒤에는 의사 요소 이름이 옵니다. 🎜🎜🎜css3🎜🎜의 새로운 선택기 목록 뒤의 요소 p :last-of-type

3:only-childp:only-child부모의 유일한 자식 요소인 모든 3:nth-child(p:nth-child(2)모든 A 3 :nth-last-child(p:nth-last-child(2) 마지막 자식 :nth-of-type(n) 두 번째 요소를 모두 선택합니다 :nth-last-of- type(n)은 각 을 선택합니다. 마지막 하위 개수 :last-childp:last-child에서 상위 요소의 두 번째 요소입니다. 각 을 선택합니다. 부모의 마지막 자식 요소입니다. :disabledinput:disabled비활성화된 모든 입력 요소 선택3:선택됨 입력: selected선택한 모든 입력 요소 선택3:not(selector):not(p) 요소가 아닌 모든 요소 선택33elements:valid:valid는 입력 값이 합법적인 요소를 일치시키는 데 사용됩니다3:invalid:invalid는 입력 값이 불법인 요소와 일치하는 데 사용됩니다 3

Selector	예	예제 설명	CSS
element1~element2	p~ul	Select 요소	3
[attribute^=value]	a[src^="https"]	각 src 속성 값이 "https"	3
[ 속성으로 시작하는 요소를 선택하세요. $=value]	a[src$=".pdf"]	src 속성 값이 ".pdf"	3
[attribute* =value]으로 끝나는 요소를 선택하세요.	a[src*="44lan"]	src 속성 값에 하위 문자열 "44lan"	3
:first-of-type	p :first-of-type	이 포함된 모든 요소를 ​​선택하세요. 상위 3	:last-of-type
은 각	요소의 첫 번째	요소를 선택합니다. 요소는 마지막 요소	3
:only-of-type	p: only-of-type	은 유일한 부모의 유일한 요소인
		요소를 선택하세요.
n)		요소를 선택하면 해당 상위 요소의 두 번째 하위 요소입니다.
n)		3
p: nth-of-type(2)		< ;P> 요소 3
p:nth-last-of-type(2)		3
		3 요소(텍스트 노드 포함)	3
:target	#news:target	현재 활성인 #news 요소(해당 앵커 이름이 포함된 클릭된 URL)를 선택합니다.	3
: 활성화됨	input:enabled	활성화된 모든 입력 요소 선택3
	::selection	::selection	일치하는 요소 중 사용자가 선택하거나 강조 표시한 부분
:out-of-range	:out-of-range	값이 지정된 범위를 벗어나는 <input >	와 일치합니다.	3
:in-range	:in-range	matches <input>elements	3
:읽기-쓰기	:읽기-쓰기	는 읽기 및 쓰기 가능한 요소를 일치시키는 데 사용됩니다.	3
:read-only	:read-only	은 "읽기 전용" 속성 집합 요소와 일치하는 데 사용됩니다.	3
:선택 사항	:선택적	은 선택적 입력 요소를 일치시키는 데 사용됩니다.	3
:required	:required	는 요소를 "필수" 속성 집합과 일치시키는 데 사용됩니다.	3

Extended 지식: css1, css2 선택기 목록

selectorexample예제 설명CSS.introChoose 모든 요소 선택 소개" 2p 모든

요소 선택

1div,pselect 모든

그리고 < ;p> ; 요소

1 div>p부모가

요소인 모든

요소를 선택합니다.

2+div+p다음의 모든 요소를 ​​선택합니다. div> 요소 뒤의 p> 요소 2][target]은 대상 속성이 2] [target=_blank]target="_blank"2~=][title~=flower]제목 선택 속성에 다음이 포함됩니다. "flower"라는 단어가 포함된 모든 요소2|=][lang|=en]lang attribute="EN" 요소의 시작 값이 있는 모든 요소 선택 2a:link방문하지 않은 링크 모두 선택1:visited1:활성a:active활성 링크 선택1:hovera:hover마우스가 링크 위에 있을 때 선택1:focusinput:focus focus2::first-letterp::first-letter1 ::first-linep:first-line1 :2:2:2lang 속성의 시작 값 선택 All 2

.class
element
	element,element
요소 요소	div p		1
> 요소
element	element
[attribute
[attribute=값인 모든 요소를 ​​선택합니다.
[attribute	value
[attribute	언어
:link
a:visited방문한 링크 모두 선택
	각 요소의 첫 글자를 선택하세요
	:		각 요소
	::first-child p	:first -child	요소가 상위 요소의 첫 번째 하위인 경우에만 스타일을 지정합니다.
	::before p:	before	각 앞에 콘텐츠 삽입
	::after p	:후	각 요소 뒤에 콘텐츠 삽입
	::lang(언어 )	p:lang(it)
	의 요소 (학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS3에는 어떤 새로운 선택기가 추가되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!