CSS—新增属性选择器

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素：

• 属性选择器
• 结构伪类选择器
• 伪元素选择器

1 属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器。类选择器，属性选择器，伪类选择器权重为10.

<style>
	input[value]{
		color:pink;
	}
</style>

2 结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的元素。

ul li:first-child{
	background-color:pink;
}

把所有偶数的孩子选出来

ul li:nth-child(even){
	background-color:#ccc;
}

把所有奇数的孩子选出来

ul li:nth-child(odd){
	background-color:#ccc;
}

n可以是公式，如果n是公式，则从0开始计算，但是0个元素或者超出了元素的个数会被忽略：

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第五个）

区别：nth-child会把所有的盒子都排列序号；而nth-of-type会先把指定元素的盒子排列序号，然后再找第n个元素

3 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

语法element::before{} element::after{}

• 在文档树中是找不到的，所以叫伪元素
• before和after是行内元素
• before和after必须有content属性
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪类选择器和标签选择器的权重相同为1，div::after权重为2