在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？

首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。

比如需要选择出input标签中具有value属性的内容，就可以按以下方式// css

input[value]{

color: #333;

}

// html

属性选择器还有以下匹配规则(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

选择出div标签中class以movie开头的元素// css

div[class^=movie]{

color: brown

}

// html

按照以上五种属性选择规则，可以自由的选择具有某些特征的元素，那么如果此时我需要选择的元素没有单独的属性呢。

比如我想要在一串列表中选择出奇数项和偶数项元素，分别设置不同的背景颜色，此时就需要结构伪类选择器登场了。

结构伪类选择器可以按下标选出指定项，比如第一项 :first-child，最后一项 :last-child，奇数项 :nth-child(even)，偶数项 :nth-child(odd)，第任何一项 :nth-child(n)

拿上述选择器做一个演示// html

• 千与千寻的神隐
• 起风了
• 龙猫
• 天空之城
• 魔女宅急便

// 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下面的第一个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元素的指定规则)

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

伪元素选择器有两个，::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

或者设置鼠标滑动后添加一个遮罩层，效果显示如下

实现代码如下

// 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

css3增加的以上选择器可以减少html的结构，更加灵活的获取需要的元素