CSS选择器详解-优快云博客

1、元素选择器
元素选择器包括id选择器、类选择器、标签选择器、通配符*。

其优先级关系为：id>类>标签>*

2、关系选择器

包含选择符，用空格隔开两个选择器 A B：选择A包含的所有B元素
例：ul li：选择ul下的所有li标签，包括更深层次的li标签
并列选择符，用**，**隔开两个选择器 A,B：选择所有的A和B元素
例：div,p：选择所有的div和p。
子选择符，用**>**隔开两个选择器 A>B：选择以A为直接父级的B元素
例：ul li：选择ul下的直接li标签，不包括深层次的嵌套的li标签
兄弟选择符，用**~**隔开两个元素 A~B：选择A之后的所有B类元素，作用于多个元素。
例：h1~p：选择h1紧挨着的p标签，如果有好几个连续的p标签，则全部匹配。
相邻选择符，用+隔开两个元素 A+B：选择A之后的B类元素，作用于一个元素。
例：h1~p：选择h1紧挨着的p标签，如果有好几个连续的p标签，只会匹配第一个。

3、属性选择器(与正则有些类似)

[attribute]：选择带有attribute属性的元素
例：[title]：匹配所有含有title属性的元素
[attribute=value]：选择attribute属性的值为value的元素
例：[type=text]：匹配所有type属性为text属性的元素
[attribute~=value]：选择attribute属性的值中含有value的元素
例：[title~=flower]：选择title属性包含单词 “flower” 的所有元素。
[attribute|=value]：选择attribute属性的值以value开头的元素，value必须是一个完整的单词。
[attribute^=value]：选择attribute属性的值以value开头的元素。
[attribute$=value]：选择attribute属性的值以value结尾的元素。
[attribute*=value]：选择attribute属性的值含有value的元素。

4、伪类选择器

①状态伪类

:link（选择所有未访问的链接）、:visited（选择所有访问过的链接）、:hover（选择鼠标悬浮所在的链接）、:active（选择活动链接）
:focus（获取焦点）、:checked（匹配选中元素，用于input type为radio与checkbox时）、:enabled（匹配可用状态的元素，一般应用于表单元素）、:disabled（匹配处于禁用状态的元素，一般用于表单元素）

②结构性伪类

E:first-child（匹配父元素的第一个子元素E）、E:last-child（匹配父元素的最后一个子元素E）、E:only-child（匹配父元素的唯一一个子元素E）、E:nth-child(n) （匹配父元素的第n个子元素是E的元素）、E:nth-last-child(n)（匹配父元素的倒数第n个元素是E的元素）、E:first-of-type（匹配父元素中的同级的E元素中的第一个E）、E:last-of-type（匹配父元素中的同级的E元素中的最后一个E）、E:only-of-type（匹配父元素中的同类型中的唯一的一个同级兄弟元素E）、E:nth-of-type(n) （匹配同类型中的第n个同级兄弟元素E）、E:nth-last-of-type(n) （匹配同类型中的倒数第n个同级兄弟元素E）、:empty 选择的元素里面没有任何内容。

5、伪元素选择器