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>
  <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元素的指定规则元素，好比 一、二、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元素的指定规则）

以上的属性选择器和结构伪类选择器都是操做元素自己，那接下来这个选择器就很神奇，它会添加一个新的不存在的元素，并操做，一块儿来看看伪元素选择器。

伪元素选择器有两个，::before，在元素的前面添加一个行内元素，::after，在元素的后面添加一个行内元素，须要添加两个冒号，为了兼容，也能够只写成一个冒号

设置伪元素，必须的属性是 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的结构，更加灵活的获取须要的元素