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