CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）
在css3提供的新选择器之前，选择⼀个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好⽤的选择器呢？
⾸先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不⽤额外再添加class或者id⽐如需要选择出input标签中具有value属性的内容，就可以按以下⽅式
// css
input[value]{
color: #333;
}
// html
<input type="text" value="请输⼊⽤户名">
<input type="text">
属性选择器还有以下匹配规则（E表⽰选择器，att表⽰属性值，val表⽰匹配的内容）
选择符简介
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元素
选择出input标签中type为password的元素
// css
input[type=password]{
color: #000
}
// html
<input type="text">
<input type="password">
选择出div标签中class以movie开头的元素
// css
div[class^=movie]{
color: brown
}
// html
<div class="movie-sky">天空之城</div>
<div class="movie-cat">龙猫</div>
<div class="movie-windy">起风了</div>
<div class="tv">武林外传</div>
按照以上五种属性选择规则，可以⾃由的选择具有某些特征的元素，那么如果此时我需要选择的元素没有单独的属性呢。
⽐如我想要在⼀串列表中选择出奇数项和偶数项元素，分别设置不同的背景颜⾊，此时就需要结构伪类选择器登场了。
结构伪类选择器可以按下标选出指定项，⽐如第⼀项 :first-child，最后⼀项 :last-child，奇数项 :nth-child(even)，偶数项 :nth-child(odd)，第任何⼀项 :nth-child(n)
拿上述选择器做⼀个演⽰
// html
<ul>
<li>千与千寻的神隐</li>
<li>起风了</li>
<li>龙猫</li>
rotate属性<li>天空之城</li>
<li>魔⼥宅急便</li>
</ul>
// css
ul :first-child {
color: brown // 选择ul的第⼀个⼦元素设置字体颜⾊为棕⾊
}
ul :last-child {
text-decoration: underline; // 选择ul的最后⼀个⼦元素设置下划线
}
ul :nth-child(even){
font-weight: bold;        // 选择ul的偶数⼦元素设置字体加粗(下标从1开始)
}
可以看到，以上每⼀个伪类选择器与前⼀个选择器并没有直接连在⼀起，都有⼀个空格，那连在⼀起表⽰什么意思呢？拿  :first-child来举例，:last-child和 :nth-child都是类似的原理
ul :first-child  表⽰选择ul⾥的第⼀个⼦元素
ul:first-child  表⽰选择第⼀个ul元素
以下为 ul:first-child
如果我们需要对⼦元素的选择器属性进⾏校验，希望选择ul⾥的第⼀个⼦元素，并且是li，那么就可以这样定义
ul li:first-child
但是如果第⼀个元素与选定的元素不匹配，那么设置的样式就不会⽣效
// css
div p:first-child {
color: brown  // 先到div的第⼀个⼦元素，发现它并不是p元素，所以样式不⽣效
}
// html
<div>
<div>div----千与千寻的神隐</div>
<p>p----起风了</p>
<p>p----龙猫</span>
<h6>h6----天空之城</h6>
<div>div----魔⼥宅急便</div>
</div>
那如果，我们想要选择div下⾯的第⼀个p元素呢？此时就可以使⽤ :first-of-type
// 表⽰选择div下p元素的第⼀个⼦元素
div p:first-of-type {
color: brown
}
那如果没有限定指定的⼦元素类型，所有的不同类型的⼦元素都会被设置样式
// css
div :first-of-type {
color: brown
}
与 :first-of-type 类似的还有以下两种选择器，分别是  :last-of-type（选择某种类型的最后⼀个⼦元素），:nth-of-type（按指定规则选择元素）// css
div :first-of-type {
color: brown
}
div :last-of-type {
text-indent: 10px;
}
div :nth-of-type(2n+1) {
text-decoration: underline;
}
来⼀个表格总结以下以上六种结构伪类选择器
选择符简介备注
E :first-child选择E元素的第⼀个⼦元素E A:first-child（选择E元素的第⼀个⼦元素，且该⼦元素是A类型元素）
E :last-child选择E元素的最后第⼀个⼦元素E A:last-child（选择E元素的最后第⼀个⼦元素，且该⼦元素是A 类型元素）
E :nth-child(n)选择E元素的指定规则元素，⽐如 1、2、3这样的数字，
even（偶数）、odd（基数）这样的关键字，n或者2n+1这
样的表达式
E A:nth-child(n)（选择E元素中符合指定规则的⼦元素，
且该⼦元素是A类型的元素）
E :first-of-
type选择E元素中不同类型的⼦元素中的第⼀个  E A:first-of-type（选择E元素中⼦元素为A，A元素中的第⼀个）
E :last-of-
type选择E元素中不同类型的⼦元素中的最后⼀个E A:last-of-type（选择E元素中⼦元素为A，A元素中的最后⼀个）
E :nth-of-
type(n)选择E元素的不同类型的指定规则  E A:nth-of-type（选择E元素中⼦元素为A，A元素的指定规则）
以上的属性选择器和结构伪类选择器都是操作元素本⾝，那接下来这个选择器就很神奇，它会添加⼀个新的不存在的元素，并操作，⼀起来看看伪元素选择器。
设置伪元素，必须的属性是 content，其它的属性可以根据⾃⼰的需要设置，它常见的有以下⼏种⽤途，添加⼀个⼩图标，⽐如圆点，箭头实现代码如下
// css
div {
position: relative;
}
div::after {
position: absolute;
top: 7px;
left: 70px;
content: '';
display: block;
width: 7px;
height: 7px;
border-right: 1px solid #333;
border-top: 1px solid #333;
transform: rotate(45deg)
}
// html
<div>查看更多</div>
或者设置⿏标滑动后添加⼀个遮罩层，效果显⽰
实现代码如下
// css
div{
position: relative;
width: 200px;
height: 200px;
margin-right: 60px;
}
img {
width: 100%;
height: 100%;
}
div::after {
display: none;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background: url(./src/broadcast.png) rgba(0,0,0,.5) center center no-repeat
}
div:hover::after{
display: block;
}
// html
<div>
<img src="./src/pig.jpg">
</div>
css3增加的以上选择器可以减少html的结构，更加灵活的获取需要的元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。