CSS选择器总结

基础选择器

元素选择器

标签名字{
	属性:属性值
}

id选择器

#id名字{
	属性:属性值
}

类选择器

.class名称{
	属性:属性值
}

通用选择器

*{
	属性:属性值
}

属性选择器

元素[属性1][属性2]{
	属性:属性值
}

用于选取带有指定属性的元素

	元素[属性=属性值]{
 		属性：属性值
 	}

用于选取带有指定属性和属性值的元素

	元素[属性～="属性值"]{
		属性:属性值
	}

用于选取属性值中包含指定词汇的元素

	元素[属性|="属性值"]{
		属性:属性值
	}

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词

	元素[属性^="属性值"]{
		属性:属性值
	}

用于选取属性值以指定值开头的每个元素

	元素[属性$="属性值"]{
		属性:属性值
	}

用于选取属性值以指定值结尾的每个元素

	元素[属性*="属性值"]{
		属性:属性值
	}

用于选取包含指定值的每个元素

---

高级选择器

群组选择器

选择器1,选择器2,选择器3{
	属性:属性值;
	}

说明：当多个选择器想要使用相同的样式的时候，可以使用群组选择器。

注意： 使用群组选择器的时候，各选择器之间的,后不能接空格

包含选择器

选择器1 选择器2 选择器3{
	属性:属性值;
	}

说明：选择器之间使用空格来隔开，且选择器3对应的元素需要包含在选择器2对应元素中，选择器2对应元素需要包含在选择器1对应元素中。

伪类选择器

a标签的伪类选择器
对于a标签，有以下四个伪类选择器

a:link{属性:属性值} #代表超链接的初始状态
a:visited{属性:属性值}#代表超链接被访问后的状态
a:hover{属性:属性值}#代表鼠标划过超链接时的状态
a:active{属性:属性值}#代表鼠标按下的时候超链接的状态

注意： 当同时使用这四个伪类选择器的时候，它们的顺序是不可以颠倒的，伪类选择器不仅仅只有这四个，其余作者并未总结。同样的，本文也未总结伪元素选择器。

结构性伪类选择器

:first-child与:last-child

单独指定第一个子元素和最后一个子元素的样式

:nth-child(x)与:nth-last-child(x)

对第x个序号的子元素使用样式
:nth-child(odd)//对第奇数个子元素使用样式
:nth-child(even)//对第偶数个子元素使用样式
:nth-last-child(odd)//所有倒数第奇数个元素使用样式
:nth-last-child(even)//所有倒数第偶数个元素使用样式
注意
此伪类选择器会先进行定位，再判断元素类型

:nth-of-type(x)
:nth-last-of-type(x)

注意
此伪类选择器会先判断元素类型，再进行定位

:nth-child(an+b)与:nth-last-child(an+b)

循环样式使用，a表示每次循环包括几种样式，b表示指定样式在循环中的位置

:only-child

只有一个子元素的时候采用此样式

目标伪类选择器

:target

突出显示当前激活的HTML锚

---

层级选择器

E>F{属性：属性值}

子选择器，只选择E的子元素中的F，不会选择其其他后代中的F

E+F{属性:属性值}

相邻兄弟选择器，若E和F有相同的父元素，且F紧跟着E，则选择F

E~F{属性：属性值}

通用兄弟选择器，与上一个相比，不需要紧跟着

---

选择器优先级

行内样式：权重值为1000
ID选择器：权重值为0100
类选择器：权重值为0010
伪类选择器：权重值为0010
属性选择器：权重值为0010
伪元素选择器：权重值为0010
元素选择器：权重值为0001
通用选择器：权重值为0000

注意:

1. 包含选择器的权重为各个选择器权重之和。
2. 当一个元素满足多个选择器的条件且选择器所规定的样式有冲突的时候，冲突的部分会使用最高权重的选择器对应的样式。
3. 权重值一样的时候，会采用后定义的选择器。