标签：CSS3 after val 伪类 元素 att 选择器 属性
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。