在css3提供的新选择器之前，抉择一个元素须要借助id或者class，css3新增的选择器能够更灵便的去抉择须要的元素，那css3提供了哪些好用的选择器呢？
首先就是属性选择器，咱们能够通过属性选择器在同样的标签/类中抉择出具备雷同属性的元素，不必额定再增加class或者id。
比方须要抉择出input标签中具备value属性的内容，就能够按以下形式
// cssinput[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的元素
// cssinput[type=password]{ color: #000}// html<input type="text"><input type="password">抉择出div标签中class以movie结尾的元素
// cssdiv[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>// cssul :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然而如果第一个元素与选定的元素不匹配，那么设置的款式就不会失效
// cssdiv 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}那如果没有限定指定的子元素类型，所有的不同类型的子元素都会被设置款式
// cssdiv :first-of-type { color: brown}与 :first-of-type 相似的还有以下两种选择器，别离是 :last-of-type（抉择某种类型的最初一个子元素），:nth-of-type（按指定规定抉择元素）
// cssdiv :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元素的指定规定） |
以上的属性选择器和构造伪类选择器都是操作元素自身，那接下来这个选择器就很神奇，它会增加一个新的不存在的元素，并操作，一起来看看伪元素选择器。
伪元素选择器有两个，::before，在元素的后面增加一个行内元素，::after，在元素的前面增加一个行内元素，须要增加两个冒号，为了兼容，也能够只写成一个冒号
设置伪元素，必须的属性是 content，其它的属性能够依据本人的须要设置，它常见的有以下几种用处，增加一个小图标，比方圆点，箭头
实现代码如下
// cssdiv { 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>或者设置鼠标滑动后增加一个遮罩层，成果显示如下
实现代码如下// cssdiv{ 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的构造，更加灵便的获取须要的元素