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

青灯夜游
풀어 주다: 2023-01-06 11:13:11
원래의
4490명이 탐색했습니다.

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿