Css3 새로운 선택기: "[attribute^=value]", "[attribute$=value]", "[attribute*=value]", ":first-of-type", ":root", ":empty ", ":대상" 등
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
1.[attribute^=value]
는 속성 값이 지정된 값으로 시작하는 각 요소와 일치합니다.[attribute^=value]
匹配属性值以指定值开头的每个元素。
2、[attribute$=value]
匹配属性值以指定值结尾的每个元素。
3、[attribute*=value]
匹配属性值中包含指定值的每个元素。
选择器 | 示例 | 示例说明 | CSS |
---|---|---|---|
:first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
:last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
:only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
:only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
:nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数 | 3 |
:last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
:root | :root | 选择文档的根元素 | 3 |
:empty | p:empty | 选择每个没有任何子级的p元素(包括文本节点) | 3 |
:target | #news:target | 选择当前活动的#news元素(包含该锚名称的点击的URL) | 3 |
:enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
:disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
:checked | input:checked | 选择每个选中的输入元素 | 3 |
:not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
:out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
:in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
:read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
:read-only | :read-only | 用于匹配设置 "readonly"(只读) 属性的元素 | 3 |
:optional | :optional | 用于匹配可选的输入元素 | 3 |
:required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
:valid | :valid | 用于匹配输入值为合法的元素 | 3 |
:invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
E~F
[attribute$=value]
는 속성 값이 지정된 값으로 끝나는 모든 요소와 일치합니다.3.[attribute*=value]
는 속성 값에 지정된 값이 포함된 모든 요소와 일치합니다.2. 의사 요소 및 의사 클래스 선택기:선택기 | 예 | 예 설명 | CSS |
---|---|---|---|
:첫 번째 유형 | p:최초 유형 | 상위 요소인 각 p 요소의 첫 번째 p 요소 선택 | 3 |
p:last-of-type | 각 p 요소를 상위 요소로 선택합니다. 마지막 p 요소 | 3 | |
:only-of-type | p: 전용 유형각 p 요소가 상위 요소인 유일한 p 요소를 선택합니다. | 3 | |
:only-child | p:only-child | 상위 요소의 유일한 하위 요소인 각 p 요소를 선택합니다.3 | |
:n번째-child(n) | p:nth-child(2) | 상위 요소인 각 p 요소의 두 번째 하위 요소 선택 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 각 p 요소를 선택하면 마지막 하위 개수에서 상위 요소의 두 번째 하위 요소가 됩니다. | 3|
:n번째 유형(n) | p:n번째 유형(2) | 각 p 요소가 상위인 두 번째 p 요소를 선택하세요. | 3 |
:nth-last-of-type (n) | p:nth-last-of-type(2) | 각 A p 요소가 상위 요소의 두 번째 p 요소임을 선택합니다. 마지막 자식부터 계산 | 3 |
:last-child | p:last-child | 상위 요소의 마지막 하위인 각 p 요소를 선택합니다. | 3 |
:루트 | :루트 | 문서의 루트 요소 선택3 | |
:empty | p:비어 있음하위 항목이 없는 모든 p 요소(텍스트 노드 포함)를 선택합니다. | 3 | |
:target | #news:target | 현재 활성화된 #news 요소(앵커 이름이 포함된 클릭된 URL)를 선택합니다. td> | 3 |
:활성화 | 입력:활성화 | 활성화된 각 입력 요소 선택 | 3|
:비활성화 | 입력:비활성화 | 비활성화된 각 입력 요소 선택 | 3 td> |
:선택됨 | 입력:선택됨 | 선택된 각 입력 요소 선택 | 3 tr> |
:not(선택기) | :not(p) | p 요소가 아닌 모든 요소 선택 | 3 |
:: 선택 | ::선택 | 사용자가 선택하거나 강조표시한 요소 부분을 일치시키세요 | 3 |
: out-of-range | :out-of-range | 값이 지정된 범위를 벗어난 입력 요소와 일치 | 3 |
:범위 내 | :범위 내 | 값이 지정된 범위 내에 있는 입력 요소 일치 | 3 |
:읽기-쓰기 | :읽기-쓰기 | 읽기 가능하고 쓰기 가능한 요소를 일치시키는 데 사용됩니다. | 3 |
:읽기 전용 | :읽기 전용 | 는 "읽기 전용" 설정과 일치하는 데 사용됩니다(읽기 전용 ) 속성 요소 | 3 |
:선택 사항 | :선택 사항 | 는 선택 사항과 일치하는 데 사용됩니다. 입력 요소 | 3 |
:required | :required | 는 "required" 요소와 일치하는 데 사용됩니다. 속성 | 3 |
:valid | :valid | 는 입력 값을 일치시키는 데 사용됩니다. 요소 | 3 |
:invalid | :invalid | 는 입력 값이 다음과 같은 경우 일치하는 데 사용됩니다. 불법 요소 | 3 |
E~F
범용 선택기(모든 후속 형제 요소 찾기)일치하는 F 요소와 일치하는 E 요소 뒤에 있는 모든 일치하는 F 요소를 선택합니다 (동영상 공유 학습 : css 동영상 튜토리얼)
위 내용은 CSS3의 새로운 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!