CSS选择器总结

一、常用选择器

1.元素选择器
例：

p{    
	color:red;
}

2.id选择器
语法：

#id名{
}

3.类选择器（常用）
根据元素的class属性选中一组元素
语法：

.类名{    
}

4.全选择器
例：

*{    
}

二、复合选择器

1.交集选择器
如果选择器中有元素选择器，必须元素选择器开头。
语法：

选择器1.选择器2.选择器n{
}

2.并集选择器
同时选中多个选择器对应的元素
语法：

选择器1,选择器2,选择器n{
}

三、关系选择器

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素；一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素；子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

1.子元素选择器
选中父元素的指定子元素。
语法：

父元素>子元素{
}

2.后代元素选择器（常用）
选中指定元素内的指定后代元素
语法：

祖先 后代{
}

3.选择下一个兄弟
语法：

前一个元素+下一个元素{
}

4.选择后面的所有兄弟（前边兄弟不选择）
语法：

兄~弟{
}

四、属性选择器

1.选择含有指定属性的元素
语法：

元素名[属性名]{
}

2.选择含有指定属性和属性值的元素
语法：

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

3.选择属性值以指定值开头的元素
语法：

元素名[属性名^=属性值]{
}

4.选择属性值以指定值结尾的元素
语法：

元素名[属性名$=属性值]{
}

5.选择属性值含有指定值的元素
语法：

元素名[属性名*=属性值]{
}

五、伪类选择器

伪类（不存在的类，特殊的类），用来描述一个元素的特殊状态。比如第一个元素、被点击的元素、鼠标移入的元素…
一般情况下都使用:开头。

一、常用
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child 选择第n个子元素
特殊值：
n 第n个 n的范围是0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd表示选择奇数位的元素
以上这些是根据所有子元素进行排序。

:first-of-type
:last-of-type
:nth-of-type()
以上伪类和上述的功能相似，不同点是他们在同类型元素中进行排序。

:not() 否定伪类将符号条件的元素从选择器中去除。
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击的状态

二、a标签的伪类
:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接。
由于隐私原因，:visited只能修改链接颜色。

六、伪元素选择器

表示页面中特殊的并不真实存在的元素（特殊位置）伪元素。
使用::开头

::first-letter 表示第一个字母
::first:line 表示第一行
::selection 表示选中的内容
最重要：
::before 元素的开始
::after 元素的
最后这两个必须结合cotent属性来使用，所添加的内容无法选中。

七、选择器权重

内联样式>id选择器>类和伪类选择器>元素选择器>统配选择器，继承的样式没有优先级。
比较优先级需要将所有选择器的优先级进行相加计算，最后优先级越高越优先显示。
选择器的累加不会超过其最大数量级。比如类选择器再高也不会超过id选择器。
如果优先级计算相同，优先使用靠下的样式。
可以在某一样式后添加 !important ，此时该样式会获取最高优先级。（这一点能不用就不用）