CSS3选择器介绍及用法总结[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了 #CCS1选择器#

CSS1版本有我们最常使用的经典选择器 ::first-letter和::first-line好像很少用 CSS2中，他俩只能应用在段落之类的块级元素，超链接等行内元素就不能用了 CSS2.1中，：first-letter可以应用所有元素 但是他们可以使用的属性还是有限制的 这里就不列出来了，毕竟不常用

链接的伪类选择器（锚伪类）我们通常这样用

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

link-visited-hover-active（LVHA） 是推荐的顺序，不会覆盖产生冲突 也很好记“绿化LVHuA”

#CSS2选择器#

这里需要注意的有div+p相邻兄弟元素选择器 选择的是紧挨着div元素后的一个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的时候很多时候是为了清除浮动

div::after { 
   
    content: "";
    display: block;
    clear: both;
}

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

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

这里说一下伪类和伪元素的区别 伪类我的理解是元素达到一种状态 状态存在，改变样式；状态消失，样式消失 伪元素应该说是操作元素的特定内容 实在分不清都写成单冒号的形式就好了 #CSS3选择器# 敲这么多终于到关键地方了 CSS3增加了很多强大的选择器，以伪劣选择器为主 CSS1和CSS2版本的选择器加起来都没它多 我们一起来看一下

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

<div class="demo demo1">1</div>
<div class="demo demo2">2</div>
<div class="demo demo3">3</div>

[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

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

<p>0</p>
<div>1</div>
<div>2</div>
<div>3</div>

div:first-child{ 
   
    background-color: red;
}

CSS3选择器介绍及用法总结[通俗易懂]

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

div:first-of-type{ 
   /*改*/
    background-color: red;
}

CSS3选择器介绍及用法总结[通俗易懂]

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

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

##根元素选择器## :root这个选择器没什么意思，和你直接使用html一样

:root { 
   ...}
html { 
   ...}

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

<p></p>
<p>1</p>
<p>2</p>
<p>3</p>

p:empty::before { 
   
    content: "12345";
    background-color: gold;
}

CSS3选择器介绍及用法总结[通俗易懂]

##目标元素选择器## 这个: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>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
<div id="fifth">5</div>

body { 
   
    height: 2000px;
}
div { 
   
    width: 200px;
    height: 200px;
    font: 200px/200px bold;
}

CSS3选择器介绍及用法总结[通俗易懂]

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

CSS3选择器介绍及用法总结[通俗易懂]

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

div:target {
    background-color: deeppink;
}

再点击链接

CSS3选择器介绍及用法总结[通俗易懂]

我们发现，跳转的同时，div样式改变了

##高亮文本选择器## ::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;
}

CSS3选择器介绍及用法总结[通俗易懂]

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

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

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;
}

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

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

主页传送门

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157210.html原文链接：https://javaforall.cn