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🎜🎜의 새로운 선택기 목록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 | 은 유일한 부모의 유일한 요소인 | 3||
p:only-child | 부모의 유일한 자식 요소인 모든 | 요소를 선택하세요. | 3||
n) | p:nth-child(2)모든 A | 요소를 선택하면 해당 상위 요소의 두 번째 하위 요소입니다. | 3 ||
n) | p:nth-last-child(2)마지막 자식 |
3 |
:nth-of-type( | |
p: nth-of-type(2) | 두 번째요소를 모두 선택합니다 | < ;P> 요소 3 |
:nth-last-of- type( | |
p:nth-last-of-type(2) | 은 각을 선택합니다. 마지막 하위 개수 |
3 | :last-childp:last-child | |
요소입니다. 각 | 을 선택합니다. 부모의 마지막 자식 요소입니다. |
3 요소(텍스트 노드 포함) |
3 | |
:target | #news:target | 현재 활성인 #news 요소(해당 앵커 이름이 포함된 클릭된 URL)를 선택합니다. | 3 | |
: 활성화됨 | input:enabled | 활성화된 모든 입력 요소 선택3 |
:disabled | |
비활성화된 모든 입력 요소 선택 | 3 | :선택됨 | ||
선택한 모든 입력 요소 선택 | 3 | :not( | ||
:not(p) | 요소가 아닌 모든 요소 선택 | |||
::selection | ::selection | 일치하는 요소 중 사용자가 선택하거나 강조 표시한 부분 | ||
:out-of-range | :out-of-range | 값이 지정된 범위를 벗어나는 <input > | elements와 일치합니다. | 3 |
:in-range | :in-range | matches <input>elements | 3 | |
:읽기-쓰기 | :읽기-쓰기 | 는 읽기 및 쓰기 가능한 요소를 일치시키는 데 사용됩니다. | 3 | |
:read-only | :read-only | 은 "읽기 전용" 속성 집합 요소와 일치하는 데 사용됩니다. | 3 | |
:선택 사항 | :선택적 | 은 선택적 입력 요소를 일치시키는 데 사용됩니다. | 3 | |
:required | :required | 는 요소를 "필수" 속성 집합과 일치시키는 데 사용됩니다. | 3 | |
:valid | :valid | 는 입력 값이 합법적인 요소를 일치시키는 데 사용됩니다 | 3 | |
:invalid | :invalid | 는 입력 값이 불법인 요소와 일치하는 데 사용됩니다 | 3 |
Extended 지식: css1, css2 선택기 목록
selector | example | 예제 설명 | CSS |
---|---|---|---|
.class | .intro | Choose 모든 요소 선택 소개" | 2 |
element | p | 모든 | 1 |
element,element | div,p | select 모든 | |
요소 요소 | div p | 1 | |
> 요소 | div>p | 부모가 | 2 |
element | +element | div+p | 다음의 모든 요소를 선택합니다. div> 요소 뒤의 p> 요소 |
[attribute | ][target] | 은 대상 속성이 | 2 |
[attribute=값인 모든 요소를 선택합니다. | ][target=_blank] | target="_blank" | 2 |
[attribute | ~=value | ][title~=flower] | 제목 선택 속성에 다음이 포함됩니다. "flower"라는 단어가 포함된 모든 요소 |
[attribute | |=언어 | ][lang|=en] | lang attribute="EN" 요소의 시작 값이 있는 모든 요소 선택 |
:link | a:link방문하지 않은 링크 모두 선택 | 1 | |
a:visited방문한 링크 모두 선택 | 1:활성 | a:active | |
1 | :hover | a:hover | |
1 | :focus | input:focus | |
2 | ::first-letter | p | |
각 요소의 첫 글자를 선택하세요 |
1 | ||
p | : | :first-line 각 요소 |
|
::first-child p | ::first -child |
요소가 상위 요소의 첫 번째 하위인 경우에만 스타일을 지정합니다. |
|
::before p: | :before |
각 앞에 콘텐츠 삽입 |
|
::after p | : :후 |
각 요소 뒤에 콘텐츠 삽입 |
|
::lang(언어 ) |
p:lang(it) | lang 속성의 시작 값 선택 All ||
의 요소 (학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드) |
위 내용은 CSS3에는 어떤 새로운 선택기가 추가되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!