目录
前言
我们所学习的HTML和CSS最总对齐HTML5和CSS3的版本，它们拥有着新的特性和新的属性，这些内容帮助我们完成了更多有趣的内容，更加精美的设计。这些新增加的特性通常都带有一定的兼容性问题，不过在科学技术日益增加的情况下，已经解决了大部分的兼容性问题。接下来就让我们一起来学习一下CSS3中新增的选择器都有什么，它们都能做什么。这里只介绍一些常用的选择器，剩下的可以大家自己去研究。
一、属性选择器
元素可以带有属性，它提供了关于如何标记的更详细信息，CSS中，你能用属性选择器来选中带有特定属性的元素，属性选择器可以根据元素特定属性的来选择元素。可以不借助于类或者id选择器。
属性选择器拥有这些种类，书写格式为：E[attr]（E为element，任意元素）。其他的属性选择器后面的中括号都放在E的后面，就可以选出它们对应的元素。
<style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li[class] {
background-color: red;
}
</style>
<body>
<div>
<ul>
<li class="one">1</li>
<li class="one">1</li>
<li class="two">2</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="five">5</li>
</ul>
</div>
</body>
接下来我解释一下其他的属性：
当attr属性等于value，那么属性选择器会找到attr="value"这个选择器，会同时修改样式。 例如class属性里面放入one属性，就会寻找clas里面有one的属性的选择器，然后更换它的颜色
<style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li[class="one"] {
background-color: red;
}
li[class="two"] {
background-color: blue;
}
li[class="three"] {
background-color: green;
}
li[class="four"] {
background-color: yellow;
}
li[class="five"] {
background-color: violet;
}
</style>
[attr^=value]，寻找attr里面的值，在这个值前面存在value，选择器里的样式就会适用。比如我寻找前面存在" f "的选择器，最后的four和five就会被选择。
<style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li[class="one"] {
background-color: red;
}
li[class="two"] {
background-color: blue;
}
li[class="three"] {
background-color: green;
}
li[class^="f"] {
background-color: yellow;
}
</style>
[attr$=value]，寻找attr里面的值，在这个值结尾存在value，选择器里的样式就会适用。比如我寻找结尾存在" e "的选择器，那么one，three，five这些后面有e的就会被选择。
<style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li[class$="e"] {
background-color: red;
}
li[class="two"] {
background-color: blue;
}
li[class="four"] {
background-color: yellow;
}
</style>
[attr*=value]，寻找attr里面的值，在这个值中存在value，选择器里的样式就会适用。比如我寻找结尾存在" o "的选择器，那么one，two，four这些后面有o的就会被选择。
<style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li[class*="o"] {
background-color: red;
}
li[class="three"] {
background-color: green;
}
li[class="five"] {
background-color: violet;
}
</style>
要注意的是，属性选择器和类选择器，伪类选择器是一样的权重，拥有10的权重，使用的时候需要注意权重大小的更换。
二、结构伪类选择器
其实结构伪类选择器属于伪类选择器使用的一种，只是这一类选择器偏向根据文档结构来进行选择，常用于父元素选择子元素。
一共有六种，可以分为两大类：
可以看出来，选择符first-child和first-of-type，last-child和last-of-type，nth-child(n)和nth-of-type(n)是差不多的效果的。只不过它们的匹配和选择的方式是不一样的。
这里我们先做两个例子来给大家看看效果：
<style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li:first-child {
background-color: red;
}
li:last-child {
background-color: blue;
}
li:nth-child(5) {
background-color: green;
}
</style>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body><style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li:first-of-type {
background-color: red;
}
li:last-of-type {
background-color: blue;
}
li:nth-of-type(5) {
background-color: green;
}
</style>
它们的效果都是没有变化的，那么为什么会有两种形式呢？第一种的结构伪类选择器，是先对ul里的li做了排序，然后寻找它们的第一个，最后一个，第五个子元素，然后在看是否是li，再适用。如果对象不再是li，就不会生效。下面这段代码就可以证明：
<style>
li {
list-style: none;
width: 100px;
height: 20px;
background-color: yellow;
}
li:first-child {
background-color: red;
}
li:last-child {
background-color: blue;
}
li:nth-child(5) {
background-color: green;
}
</style>
<body>
<div>
<ul>
<i>1</i>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
可以看到，如果第一个不是li，那么原本li里面的第一个也不会变化，而且因为排序是包括i标签的，原本应该是5变色的li变成了4。但是如果是第二种结构伪类选择器，它们会先寻找是li的选择器，然后再做排序，寻找里面的第一个，第五个，最后一个：
<style>
li {
list-style: none;
width: 100px;
height: 20px;
background-color: yellow;
}
li:first-of-type {
background-color: red;
}
li:last-of-type {
background-color: blue;
}
li:nth-of-type(5) {
background-color: green;
}
</style>
可以看到1还是变成了红色，5还是原来的绿色。这就是这两种结构伪类选择器它们的区别，在适当的时候去使用就可以。另外说一点：n类选择器括号内的n可以是任何数字，也可以是公式，关键字（比如even偶数，odd奇数），根据自己的需要去放入合适的内容就可以做出自己想要的效果：
<style>
li {
list-style: none;
width: 100px;
height: 20px;
}
li:nth-of-type(2n) {
background-color: rgb(0, 132, 255);
}
li:nth-child(2n+1) {
background-color: rgb(127, 136, 255);
}
</style>
三、伪元素选择器
伪元素选择器，就是不存在于html里的，是用CSS创造出来的盒子。伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要html标签，从而简化html结构。
这里有这么一些点需要注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法：element::before { content: ""; }
- before和after必须有content属性
- b伪元素选择器和标签选择器一样，权重为1
我可以利用伪元素去实现各种装饰，或者放入字体元素，更重要的是，我们的清除浮动的效果就是用伪元素完成的。利用两个盒子放在一前一后，形成封闭区域，完成了清楚浮动的能力。
这里放一个土豆视频例子给大家观看：
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
margin: 30px auto;
}
img {
width: 100%;
height: 100%;
}
.tudou::before {
content: "";
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(img/arr.png) rgba(0, 0, 0, 0.5) no-repeat center;
}
.tudou:hover::before {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="img/tudou.jpg" alt="">
</div>
</body>
这样就可以用伪元素生成一个黑色的遮罩层，这一层不会影响html的结构，也方便的其他内容的书写，简化了这个过程。
总结
属性选择器和伪类选择器都是权重10的选择器。伪元素需要注意的是他的权重为1，在使用的时候需要注意权重大小的变化。除此之外，在适当需要使用选择器的时候需要认真的观察整个html的结构，以防止出现选择器选择错误的情况。另外，伪类结构选择器需要注意先选择和后选择的关系变化，最后希望大家能给我一个一键三连让我有更多的动力做出更好的内容。
扫一扫
1534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
