>  기사  >  웹 프론트엔드  >  CSS3의 새로운 선택자는 무엇입니까?

CSS3의 새로운 선택자는 무엇입니까?

青灯夜游
青灯夜游원래의
2021-12-14 18:37:093461검색

Css3 새로운 선택기: "[attribute^=value]", "[attribute$=value]", "[attribute*=value]", ":first-of-type", ":root", ":empty ", ":대상" 등

CSS3의 새로운 선택자는 무엇입니까?

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

1. 속성 선택기:

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

    2. [attribute$=value]는 속성 값이 지정된 값으로 끝나는 모든 요소와 일치합니다.

    3. [attribute*=value]는 속성 값에 지정된 값이 포함된 모든 요소와 일치합니다.

    2. 의사 요소 및 의사 클래스 선택기:
  • :last-of-typep: 전용 유형3문서의 루트 요소 선택 p:비어 있음3
    선택기 예 설명 CSS
    :첫 번째 유형 p:최초 유형 상위 요소인 각 p 요소의 첫 번째 p 요소 선택 3
    p:last-of-type 각 p 요소를 상위 요소로 선택합니다. 마지막 p 요소 3
    :only-of-type각 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 요소를 선택하면 마지막 하위 개수에서 상위 요소의 두 번째 하위 요소가 됩니다.
    :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 요소(텍스트 노드 포함)를 선택합니다. 3
    :target #news:target 현재 활성화된 #news 요소(앵커 이름이 포함된 클릭된 URL)를 선택합니다. td> 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
3. 레벨 선택기:

E~F

🎜범용 선택기(모든 후속 형제 요소 찾기)🎜🎜일치하는 F 요소와 일치하는 E 요소 뒤에 있는 모든 일치하는 F 요소를 선택합니다🎜🎜 🎜🎜(동영상 공유 학습 : 🎜css 동영상 튜토리얼🎜)🎜

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.