CSS3 新增选择器(属性选择器、结构伪类选择器、伪元素选择器)
作者：互联网
CSS3 新增选择器
CSS3 给我们新增了属性选择器、结构伪类选择器、伪元素选择器。让我们可以更加便捷，更加自由的选择目标元素。
忘了四种基础选择器赶紧复习一下吧
忘了四种复合选择器赶紧复习一下吧
一、属性选择器
属性选择器可以根据元素特定的属性来选择元素，这样可以不用借助于类或 id 选择器。
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有 att 属性的 E 元素 |
| E[att=“val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
| E[att^=“val”] | 选择具有 att 属性且属性值以 val 开头的 E 元素 |
| E[att$=“val”] | 选择具有 att 属性且属性值以 val 结尾的 E 元素 |
| E[att*=“val”] | 选择具有 att 属性且属性值含有 val 的 E 元素 |
- E[att]： 选择具有 att 属性的 E 元素
- E[att=“val”]：选择具有 att 属性且属性值等于 val 的 E 元素【重点】
- E[att^=“val”]：选择具有 att 属性且属性值以 val 开头的 E 元素
- E[att$=“val”]：选择具有 att 属性且属性值以 val 结尾的 E 元素
- E[att*=“val”]：选择具有 att 属性且属性值含有 val 的 E 元素
【注意】属性选择器的权重是 0，0，1，0。跟类选择器权重一样。选择器权重问题
二、结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器选择里面的子元素。
| 选择符 | 简介 |
|---|---|
| E:firse-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 匹配指定类型E的第一个子元素 |
| E:last-of-type | 匹配指定类型E的最后一个子元素 |
| E:nth-of-type(n) | 匹配指定类型E的第n个子元素 |
- E:firse-child 和 E:last-child：匹配第一个和最后一个子元素
- E:nth-child(n)：可以选择符元素的一个或多个特定的子元素。其中括号后的参数n 可以是数字，关键字，或者是公式。
数字： 选择第n个子元素，从1开始的。
关键字： even(偶数)，odd(奇数)。
公式： 常见公式如下（n如果是公式则是从 0 开始的，但元素没有第 0 个或者n到了超出子元素个数时都会被忽略）
| 公式 | 取值 |
|---|---|
| n | 所有的子元素 |
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5的倍数 |
| n+5 | 从第5个开始到最后 |
| -n+5 | 前5个（包含第5个） |
E:first-of-type、E:last-of-type、E:nth-of-type(n) 用法与E:first-child、E:last-child、E:nth-child(n)类似，区别如下：
-
E:first-child(n)：表示在父元素中直接找到第n个子元素，再判断它是不是给定的类型E，如果是则写的样式有效，不是则不生效。
-
E:first-of-type(n)：表示先把父元素中所有是类型E的子元素找出来排序，再选出找出的E子元素中的第n个，如果有则设置为相应的样式。没有则不生效。
三、伪元素选择器【重点】
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
两个重要的伪元素是::before、::after。伪元素前面是用两个冒号表示。
-
:: before：在元素内部的前面插入内容
-
:: after：在元素内部的后面插入内容
【注意几点：】
- before 和 after 创建的元素属于行内元素
- before 和 after 创建的元素在文档树中找不到，所以称之为伪元素
- 语法：element::before{}
- before 和 after 必须要有 content 属性
- 伪元素选择器和标签选择器权重一样：0,0,0,1
伪元素选择器使用场景1：伪元素字体图标
利用伪元素制作下图：
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
margin: 5px auto;
}
div::after{
content: '\e609'; // 下三角图标编码
font-family: 'iconfont'; // 阿里字体图标
position: absolute;
top: 8px;
right: 10px;
}
字体图标的使用参看：CSS字体图标的使用
伪元素选择器使用场景2：仿土豆视频效果
利用伪元素为土豆视频添加鼠标进过显示遮罩层：
<style>
.tudou {
position: relative;
display: inline-block;
font-family: "iconfont";
width: 220px;
height: 125px;
border: 1px solid red;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::after { // 添加伪元素
content: "";
display: none;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: rgba(85, 56, 56, 0.6) url(images/bofang.png) no-repeat center;
}
.tudou:hover::after{ // 鼠标移到tudou就让里面的after显示出来
display: block;
}
</style>
<body>
<div class="tudou">
<img src="images/shipin1.png" alt="">
</div>
<div class="tudou">
<img src="images/shipin2.png" alt="">
</div>
<div class="tudou">
<img src="images/shipin3.png" alt="">
</div>
</body>
伪元素选择器使用场景3：伪元素清楚浮动
为什么要清除浮动：当父盒子没有高度，而子盒子有浮动时会出现父盒子高度为0（因为浮动的元素不占有位置），会影响下面的标准流盒子。视频链接
<style>
.one {
border: 1px solid red;
}
.one span{
/* float: left; */ // 浮动代码
display: inline-block;
width: 40px;
height: 40px;
background-color: pink;
}
.two {
height: 50px;
background-color: gray;
}
</style>
<body>
<div class="one">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="two"></div>
</body>
div 中子盒子浮动前：
div 中子盒子添加浮动后：
- 额外标签法清除浮动（隔墙法）：W3C推荐的方法
在浮动元素后添加一个空的块级元素：
<style>
.one {
border: 1px solid red;
}
.one span{
float: left;
display: inline-block;
width: 40px;
height: 40px;
background-color: pink;
}
.cc{ // 额外标签清除左右浮动
clear: both;
}
.two {
height: 50px;
background-color: gray;
}
</style>
<body>
<div class="one">
<span>1</span>
<span>2</span>
<span>3</span>
<div class="cc"></div> // 添加的额外标签
</div>
<div class="two"></div>
</body>
- 给父级添加 overflow
可以给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll。
<style>
.one {
border: 1px solid red;
overflow: hidden; //父级添加清除浮动代码
}
.one span{
float: left;
display: inline-block;
width: 40px;
height: 40px;
background-color: pink;
}
.two {
height: 50px;
background-color: gray;
}
</style>
<body>
<div class="one">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="two"></div>
</body>
- 伪元素清楚浮动时额外标签法的一种升级和优化
.clearfix::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
要清楚浮动的父元素加上类 clearfix 即可清除浮动，原理与额外标签法一样。
// 更常见的写法
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
标签：CSS3,after,val,伪类,元素,att,选择器,属性 来源： https://blog.csdn.net/ItDaChuang/article/details/120442079