CSS 선택기는 무엇을 의미합니까?

CSS에서 선택기는 스타일을 지정해야 하는 요소를 선택하기 위한 모드입니다. CSS 선택기는 CSS 스타일의 개체, 즉 "스타일"이 작동하는 웹 페이지의 요소를 지정하며 구문 형식은 다음과 같습니다. "선택기 {스타일}" . HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다.

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

CSS에서 선택기는 스타일을 지정해야 하는 요소를 선택하는 모드입니다.

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

각 CSS 스타일 정의는 두 부분으로 구성되며 형식은 다음과 같습니다. [코드] 선택기 {스타일} [/코드] {} 앞의 부분은 "선택기"입니다. "선택기"는 {}의 "스타일" 개체, 즉 웹페이지에서 "스타일"이 작동하는 요소를 지정합니다.

CSS에는 어떤 선택자가 있나요

Selector	Example	예제 설명
.class	.intro	class="intro"로 모든 요소를 ​​선택하세요.
.class1.class2	.name1.name2	class 속성에서 name1과 name2를 모두 갖는 요소를 모두 선택합니다.
.class1 .class2	.name1 .name2	클래스 이름 name1 요소의 자손인 모든 클래스 이름 name2 요소를 선택합니다.
#id	#firstname	id="firstname"인 요소를 선택하세요.
*	*	모든 요소를 ​​선택하세요.
element	p	모든 요소를 선택합니다.
element.class	p.intro	은 class="intro"인 모든 요소를 선택합니다.
element,element	div, p	는 모든 요소와 모든 요소를 선택합니다.
element element	div p	요소 내의 모든 요소를 선택합니다.
element>element	div > p	부모 요소가
element+element	div + p	요소 바로 다음의 첫 번째 요소를 선택합니다.
element1~element2	p ~ ul	요소 앞에 오는 모든 요소를 선택합니다.
[attribute]	[target]	target 속성이 있는 모든 요소를 ​​선택합니다.
[attribute=value]	[target=_blank]	target="_blank" 속성이 있는 모든 요소를 ​​선택합니다.
[attribute~=value]	[title~=flower]	제목 속성에 '꽃'이라는 단어가 포함된 모든 요소를 ​​선택하세요.
[attribute|=value]	[lang|=en]	lang 속성 값이 "en"으로 시작하는 모든 요소를 ​​선택합니다.
[attribute^=value]	a[href^="https"]	src 속성 값이 "https"로 시작하는 모든 요소를 선택합니다.
[attribute$=value]	a[href$=".pdf"]	src 속성이 ".pdf"로 끝나는 모든 요소를 선택합니다.
[attribute*=value]	a[href*="w3schools"]	href 속성 값에 "abc" 하위 문자열이 포함된 모든 요소를 선택합니다.
:active	a:active	활성 링크를 선택하세요.
::after	p::after	각 뒤에 콘텐츠를 삽입하세요.
::before	p::before	각 의 콘텐츠 앞에 콘텐츠를 삽입하세요.
:checked	input:checked	선택한 각 요소를 선택합니다.
:default	input:default	기본 요소를 선택합니다.
:disabled	input:disabled	비활성화된 각 요소를 선택합니다.
:empty	p:empty	하위 요소가 없는 모든 요소(텍스트 노드 포함)를 선택합니다.
:enabled	input:enabled	활성화된 각 요소를 선택합니다.
:first-child	p:first-child	상위 요소의 첫 번째 하위인 모든 요소를 선택합니다.
::first-letter	p::first-letter	각 요소의 첫 글자를 선택합니다.
::first-line	p::first-line	각 요소의 첫 번째 줄을 선택합니다.
:first-of-type	p:first-of-type	상위 요소의 첫 번째 요소를 선택합니다.
:focus	input:focus	포커스를 받는 입력 요소를 선택하세요.
:fullscreen	:fullscreen	전체 화면 모드에 있는 요소를 선택합니다.
:hover	a:hover	마우스 포인터가 있는 링크를 선택하세요.
:in-range	input:in-range	값이 지정된 범위 내에 있는 입력 요소를 선택합니다.
:indeterminate	input:indeterminate	은 불확정 상태에 있는 입력 요소를 선택합니다.
:invalid	input:invalid	잘못된 값이 있는 모든 입력 요소를 선택합니다.
:lang(언어)	p:lang(it)	lang 속성이 "it"(이탈리아어)와 동일한 모든 요소를 선택합니다.
:last-child	p:last-child	상위 요소에 속하는 마지막 하위 요소인 각 요소를 선택합니다.
:last-of-type	p:last-of-type	상위 요소의 마지막 요소를 선택합니다.
:link	a:link	방문하지 않은 링크를 모두 선택하세요.
:not(selector)	:not(p)	은 요소가 아닌 모든 요소를 ​​선택합니다.
:nth-child(n)	p:nth-child(2)	상위 요소의 두 번째 하위인 모든 요소를 선택합니다.
:nth-last-child(n)	p:nth-last-child(2)	위와 동일하며 마지막 하위 요소부터 계산됩니다.
:nth-of-type(n)	p:nth-of-type(2)	상위 요소의 두 번째 요소를 선택합니다.
:nth-last-of-type(n)	p:nth-last-of-type(2)	위와 동일하지만 마지막 하위 요소부터 계산을 시작합니다.
:only-of-type	p:only-of-type	상위 요소의 유일한 요소를 선택합니다.
:only-child	p:only-child	상위 요소의 유일한 하위 요소인 모든 요소를 선택합니다.
:선택적	input:선택적	"필수" 속성이 없는 입력 요소를 선택하세요.
:out-of-range	input:out-of-range	값이 지정된 범위를 벗어나는 입력 요소를 선택하세요.
::placeholder	input::placeholder	"placeholder" 속성이 지정된 입력 요소를 선택합니다.
:read-only	input:read-only	"readonly" 속성이 지정된 입력 요소를 선택합니다.
:read-write	input:read-write	"readonly" 속성을 지정하지 않는 입력 요소를 선택합니다.
:required	input:required	"필수" 속성이 지정된 입력 요소를 선택합니다.
:root	:root	문서의 루트 요소를 선택합니다.
::selection	::selection	사용자가 선택한 요소의 일부를 선택합니다.
:target	#news:target	현재 활성인 #news 요소를 선택합니다.
:valid	input:valid	유효한 값을 가진 모든 입력 요소를 선택합니다.
:visited	a:visited	방문한 링크를 모두 선택하세요.

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS 선택기는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!