찾다
웹 프론트엔드프런트엔드 Q&ACSS3의 새로운 선택자는 무엇입니까?

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으로 문의하세요.
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경