> 웹 프론트엔드 > CSS 튜토리얼 > CSS3 선택기의 자세한 소개 및 사용법 요약

CSS3 선택기의 자세한 소개 및 사용법 요약

黄舟
풀어 주다: 2017-05-21 16:10:01
원래의
2031명이 탐색했습니다.

CSS3추가많은 강력한 선택기

이를 통해 js이벤트스크립트
작성 횟수를 줄일 수 있습니다. 각 버전의 선택기를 살펴보세요
참고:
ele는 요소 요소를 나타냅니다
attr은 속성속성을 나타냅니다. val은 값 속성 값을 나타냅니다
:xxx 그들은 모두 의사에 속합니다 클래스 선택자 , ::xxx는 모두 유사 요소 선택자
명명된 선택자를 최대한 세분화했습니다.

CCS1 선택자

선택기 유형 설명
.클래스
选择器 类型 示例 说明
.class 类选择器 .demo 选择所有class包含demo的元素
#id ID选择器 #unique 选择所有id是unique的元素
ele 元素选择器 p 选择所有p元素
ele,ele 并列选择器 h1,h2 选择所有h1元素和h2元素
ele ele 后代选择器 p p 选择p元素内的所有p元素
:link 伪类选择器 a:link 选择未访问链接
:visited 伪类选择器 a:visited 选择访问过链接
:active 伪类选择器 a:active 选择活动链接
:hover 伪类选择器 a:hover 选择鼠标悬浮链接
::first-letter 首字母选择器 p:first-letter 选择每一个p元素的第一个字母
::first-line 首行选择器 p:first-line 选择每一个p元素的第一行
클래스 선택기
.demo 클래스에 데모가 포함된 모든 요소 선택
#id td> ID 선택기 #unique 모두 선택 고유한 ID를 가진 요소
ele 요소 선택기 p 모든 p 요소 선택
ele,ele 열 선택기 h1,h2 모든 h1 요소 및 h2 요소 선택
요소 요소 하위 항목 선택기 p p p 요소 내의 모든 p 요소 선택
:링크 의사 클래스선택기 a:link 방문하지 않은 링크 선택
:visited 의사 클래스 선택기 a:visited td> 방문한 링크 선택
:active 의사 클래스 선택기 a:active 활성 링크 선택 td>
:hover 의사 클래스 선택기 a:hover 마우스 가리키기 링크 선택
::first-letter 첫 글자 선택기 p:first-letter td> 각 p 요소의 첫 글자 선택
::첫 번째 줄 첫 번째 줄 선택기 p:first-line 각 p 요소 선택 첫 번째 줄

CSS1 버전에는 가장 일반적으로 사용되는 클래식 선택자가 있습니다.
::first-letter 및 ::first-line은 거의 사용되지 않는 것 같습니다.
CSS2에서는 단락과 블록 수준 요소와 마찬가지로 하이퍼링크 및 기타 인라인 요소를 사용할 수 없습니다
CSS2.1에서는 :first-letter를 모든 요소에 적용할 수 있지만
속성에 제한이 있습니다. 사용할 수 있습니다
결국 일반적으로 사용되지는 않습니다.


링크의 의사 클래스 선택자(anchor pseudo-class)는 일반적으로 이렇게 사용합니다. :

a:link {color: blue;}             /*静态伪类:未访问链接时蓝色*/a:visited {color: purple;}        /*静态伪类:访问过的链接变为紫色*/a:hover {color: red;}             /*动态伪类:鼠标悬浮在链接上变为红色*/a:active {color: orange;}         /*动态伪类:鼠标按下链接时变为橘黄色*/
로그인 후 복사

LVHA(link-visited-hover-active)는 권장 순서이며 덮어쓰기로 인한 충돌이 발생하지 않습니다
"greening LVHuA"도 기억하기 쉽습니다

CSS2 선택기

< /tr>< td>p+p< td>대상 속성 및 속성 값이 있는 요소 선택 _blank< /tr >
선택기유형설명
*와일드카드 선택기*모든 요소 선택
ele>ele직접하위 요소 선택기
选择器类型示例说明
*通配选择器*选择所有元素
ele>ele直接子元素选择器p>p选择父级是p元素的p元素
ele+ele相邻兄弟元素选择器p+p选择紧挨着p元素之后的一个p元素
[attr]属性选择器[target]选择带有target属性的元素
[attr=val]属性选择器[target=_blank]选择有target属性并且属性值是_blank的元素
[attr~=val]属性选择器[title~=demo]选择有title属性并且包含单词”demo”的元素
[attr|=language]属性选择器[lang|=en]选择lang属性的起始值为EN的元素
:focus焦点选择器input:focus选择具有焦点的input元素
:first-child首子级选择器p:first-child选择p元素是其父级的第一个子级的元素
::before伪元素选择器p::before在p元素之前插入内容
::after伪元素选择器p::after在p元素之后插入内容
:lang(language)伪类选择器p:lang(it)选择lang属性的起始值是it的p元素
p>p부모가 p 요소인 p 요소를 선택하세요
ele+ele인접 형제 요소 선택기p 요소 바로 뒤의 p 요소 선택
[attr] 속성 선택기<🎜>[대상]< /td>대상 속성이 있는 요소로 선택
[attr=val]속성 선택기[target= _blank]
[attr~=val]속성 선택기[title~=demo]제목 속성이 있고 "demo"라는 단어가 포함된 요소를 선택하세요.
[attr|=lang<🎜>uage]속성 선택기[lang |=en]lang 속성의 시작 값이 EN인 요소를 선택하세요.
:focus<🎜>포커스 선택기input:focus입력을 선택하세요. 포커스 요소
:first-child<🎜> < /td>첫 번째 하위 선택기p:first-childp 요소가 상위 요소의 첫 번째 하위 요소인 요소를 선택합니다.
::before<🎜>의사 요소 선택기 p::beforep 요소 앞에 콘텐츠를 삽입하세요
::after<🎜>의사 요소 선택기p::after p 요소 뒤에 내용 삽입
:lang< 🎜>(언어)의사 클래스 선택기p:lang(it)선택한 lang 속성의 시작 값은 해당 요소의 p입니다.< /td>

这里需要注意的有p+p相邻兄弟元素选择器
选择的是紧挨着p元素后的一个p元素,
发现一些网站和书上写的都是所有p元素,但我验证了一下发现好像不对

title~demo是说title属性包含demo这个词,属性值之间用空格分隔的单词
像这样<img title="demo demo1 demo2"></img>是可以选中的
但是<img title="demo1 demo2"></img>就不能够选中

语言的选择器不常用过就不说了

::before和::after伪元素选择器要想添加内容,需要使用content属性

p::before {    content: "123";}
로그인 후 복사

我们用after的时候很多时候是为了清除浮动

p::after {    content: "";    display: block;    clear: both;}
로그인 후 복사

至于为什么就不是今天讨论的范畴了( ̄_, ̄ )

伪类与伪元素

伪元素选择器写成伪类单冒号的形式没什么问题
但是伪类选择器使用双冒号就不能选择元素了

这里说一下伪类伪元素的区别
伪类我的理解是元素达到一种状态
状态存在,改变样式;状态消失,样式消失
伪元素应该说是操作元素的特定内容
实在分不清都写成单冒号的形式就好了

CSS3选择器

敲这么多终于到关键地方了
CSS3增加了很多强大的选择器,以伪劣选择器为主
CSS1和CSS2版本的选择器加起来都没它多
我们一起来看一下

选择器类别示例说明
ele~ele后兄弟元素选择器p~p选择p元素之后的所有p元素
[attr^=val]属性选择器a[src^=https]选择src属性值以https开头的元素
[attr$=val]属性选择器a[src$=.pdf]选择src属性值以.pdf结尾的元素
[attr*=val]属性选择器a[src*=demo]选择src属性的值包含子字符串demo的元素
:first-of-type伪类选择器p:first-of-type选择每个p元素是其父级的第一个p元素
:last-of-type伪类选择器p:last-of-type选择每个p元素是其父级的最后一个p元素
:only-of-type伪类选择器p:only-of-type选择每个p元素是其父级的唯一p元素
:only-child唯一子元素选择器p:only-child选择每个p元素是其父级的唯一子元素
:nth-child(n)伪类选择器p:nth-child(2)选择每个p元素是其父级的第二个子元素
:nth-last-child(n)伪类选择器p:nth-last-child(2)选择每个p元素的是其父级的倒数第二个子元素
:nth-of-type(n)伪类选择器p:nth-of-type(2)选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)伪类选择器p:nth-last-of-type(2)选择每个p元素的是其父级的倒数第二个p元素
:last-child伪类选择器p:last-child选择每个p元素是其父级的最后一个子元素
:root根元素选择器:root选择文档根元素
:empty标签选择器p:empty选择无任何子元素(包括文本节点)的p元素
:target目标元素选择器new:target选择当前活动的#new元素(包含锚名称点击的URL)
:enabled伪类选择器input:enabled选择已启用的input元素
:disabled伪类选择器input:disabled选择禁用的input元素
:checked伪类选择器input:checked选择选中的input元素
:not(selector)否定选择器:not(p)选择不是p元素的元素
::selection高亮文本选择器::selection匹配元素中被用户选中或处于高亮状态的部分
:out-of-range伪类选择器:out-of-range选择值在指定区间之外的input元素
:in-range伪类选择器:in-range选择值在指定区间之内的input元素
:read-write读写元素选择器:read-write选择可读并且可写的元素
:read-only只读元素选择器:read-only选择设置了readonly属性的只读元素
:optional伪类选择器:optional选择可选的input元素
:required伪类选择器:required选择设置了required属性的元素
:valid合法元素选择器:valid选择输入值合法的元素
:invalid非法元素选择器:invalid选择输入值非法的元素

属性选择器

[attr^=val],[attr$=val],[attr*=val] 这三个属性选择器放在一起记
也很好记,很想我们正则表达式中用的开头匹配符^,结尾匹配符$,统配匹配符*
同时还要区别于CSS2中的[attr~=val]

<p class="demo demo1">1</p><p class="demo demo2">2</p><p class="demo demo3">3</p>
로그인 후 복사

[class^=de]可以把三行都选中,因为它们的class属性都是以“de”开头的
[class$=o2]可以选中第二行,因为只有它的class属性是以“o2”结尾的
[class*=em]同样可以选中三行,因为它们class的都包含字符串“em”
[class~=de]不能选中任何行,因为它class中以空格分隔的属性值中没有“de”的属性值

说到这个属性选择器,我还要多说一点
我在表格中的示例是这么写的 a[src$=\.pdf]
是因为“.”它不认识,我们需要加“\”转义
不过css中属性选择器也可以写成引号的形式
比如说下面代码时等价的
a[src$=\.pdf]
a[src$=".pdf"]
a[src$=&#39;.pdf&#39;]

子元素选择器

下面的一堆什么type、child的选择器都是针对子元素在父元素中的位置的
表格中列出的很详细了
我主要谈谈type、child的区别,
以最简单的:first-child和:first-of-type为例

<p>0</p><p>1</p><p>2</p><p>3</p>
로그인 후 복사
p:first-child{    background-color: red;}
로그인 후 복사


使用first-child我们发现页面没有变化
这是因为p并不是body元素的第一个子元素


p:first-of-type{/*改*/
    background-color: red;}
로그인 후 복사


改为first-of-type我们发现第一个p变红了
这是因为它是body元素的子元素中所有p的第一个

其他的也是一样的道理,举一反三

根元素选择器

:root这个选择器没什么意思,和你直接使用html一样

:root {...}
html {...}
로그인 후 복사

空元素选择器

:empty就是选择真正的空元素,内部没有任何子元素,文本节点也不能有
举个例子

<p></p><p>1</p><p>2</p><p>3</p>
로그인 후 복사
p:empty::before {    content: "12345";    background-color: gold;}
로그인 후 복사

目标元素选择器

这个:target选择器还有点意思
写一个例子

<a href="#first">1st</a><br><a href="#second">2nd</a><br><a href="#third">3rd</a><br><a href="#fourth">4th</a><br><a href="#fifth">5th</a><br><br><br><br><br><br><p id="first">1</p><p id="second">2</p><p id="third">3</p><p id="fourth">4</p><p id="fifth">5</p>
로그인 후 복사
body {    height: 2000px;}p {    width: 200px;    height: 200px;    font: 200px/200px bold;}
로그인 후 복사

这是一个小demo可以利用锚点在页面中进行跳转
点击链接可以跳转到对应id的元素,并且url链接也发生了改变

此时就会触发:target的样式
我们来试一试,加几行代码

p:target {    background-color: deeppink;}
로그인 후 복사

再点击链接

我们发现,跳转的同时,p样式改变了

高亮文本选择器

::selection是CSS3新增的选择器
它用来匹配突出显示的文本(用鼠标选择文本)
浏览器有默认的样式(背景为蓝色,字体为)

<p>this is a long long text...</p>
로그인 후 복사
p::selection{    color: white;    background-color: dodgerblue;}
로그인 후 복사

浏览器默认的样式就是相当于这样,我们可以自己修改

否定选择器

:not()这个选择器可以排除某些特定条件的元素
比如说我们可以这样用

<p class="demo">1</p><p>2</p><p>3</p>
로그인 후 복사
p:not(.demo) {    background-color: aqua;}
로그인 후 복사


这样类属性中有demo的元素就不会变色

CSS小图表

剩下的选择器大部分都是针对input输入标签的
不详细讲了
我们做一个小练习,仅仅用CSS3的选择器做一个点击按钮切换图片的小图表
通过点击单选框显示不同的图片
像这样

首先我们需要编写html代码
使用三个radio和三个img元素

<input type="radio" name="demo" id="a" checked><img src="a.jpg" ><input type="radio" name="demo" id="b"><img src="b.jpg"><input type="radio" name="demo" id="c"><img src="c.jpg">
로그인 후 복사

然后css部分通过:checked配合条件选择器控制img元素的显示

input {    margin-left: 35px;}img {    display: none;}:checked+img {    position: absolute;    left: 10px;    top: 40px;    display: inline-block;}
로그인 후 복사

这样我们就完成了我们的小图表功能


整理了一晚上的选择器,可能会有遗漏的
如果想起来,日后再补吧

위 내용은 CSS3 선택기의 자세한 소개 및 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿