CSS选择器介绍

一、元素选择器

E{...}

二、属性选择器

E[attr]{...}：指定该CSS对具有attr的元素起作用；

E[attr=value]{...}：：指定该CSS对具有attr的值为value的元素起作用；

E[attr~=value]{...}：指定该CSS对具有attr属性，且属性值以逗号分隔，属性值中有value的元素起作用；

E[attr|=value]{...}：指定该CSS对具有attr属性，且属性值以连字符分割，第一个属性值为value的元素起作用；

E[attr^="value"]{...}：指定该CSS对具有attr属性，且属性值是以value开头的字符串的元素起作用；

E[attr$="value"]{...}：指定该CSS对具有attr属性，且属性值是以value结尾的字符串的元素起作用；

E[attr*="value"]{...}：指定该CSS对具有attr属性，且属性值包含value的字符串的元素起作用。

同时具有以上选择器是，优先级由上到下依次增高。

三、ID选择器

#ID{...}

四、CLASS选择器

.CLASS{...}

五、包含选择器

Selector1 Selector2{...}：指定该CSS对在选择器Selector1中满足Selector2的元素起作用。

六、自选择器

Selector1>Selector2{...}：指定该CSS对选择器Selector1的直接子元素（或子元素的子元素等）满足Selector2的元素起作用。

七、兄弟选择器

Selector1~Selector2{...}:指定该CSS对选择器Selector1的兄弟元素中满足Selector2的元素起作用。

八、选择器组合

Selector1,Selector2,Selector3,...{...}:指定该CSS对一系列满足选择器的元素起作用。

九、伪元素选择器

E:first-letter{...}：指定该CSS对E元素的第一个字符起作用；

E:first-line{...}：指定该CSS对E元素的第一行起作用；

E:before{...}：指定该CSS对E元素内容前添加相关内容；

E:after{...}：指定该CSS对E元素内容后添加相关内容。

后两个选择器需要结合与内容相关的属性使用。

十、结构性 伪类选择器

Selector:root{...}：对HTML文档的根元素起作用；

Selector:first-child{...}：对满足选择器，且是父元素的第一个子元素起作用；

Selector:last-child{...}：对满足选择器，且是父元素的最后一个子元素起作用；

Selector:nth-child(n){...}：对满足选择器，且是父元素的第n个子元素起作用；

Selector:nth-last-child(n){...}：对满足选择器，且是父元素的倒数第n个子元素起作用；

Selector:only-child{...}：对满足选择器，且是父元素唯一的子元素起作用；

Selector:first-of-type{...}：对满足选择器，且是同类兄弟元素中的第一个元素起作用；

Selector:last-of-type{...}：对满足选择器，且是同类兄弟元素中的最后一个元素起作用；

Selector:nth-of-type(n){...}：对满足选择器，且是同类兄弟元素中第n个元素起作用；

Selector:nth-last-of-type{...}：对满足选择器，且是同类兄弟元素中倒数第n个元素起作用；

Selector:only-of-type{...}：对满足选择器，且兄弟元素中唯一该类型的元素起作用；

Selector:empty{...}：对满足选择器且内部没有任何子元素的元素起作用。

十一、UI元素状体伪类选择器

Selector:link：满足选择器且未被访问过的元素；

Selector:visited：满足选择器且已被访问过的元素；

Selector:active：满足选择器且处于被用户激活状态的元素，激活指在用户鼠标点击与释放之间的事件；

Selector:hover：满足选择器且处于鼠标悬停状态的元素；

Selector:focus：满足选择器且已得到焦点的元素；

Selector:enabled：满足选择器且当前处于可用状态的元素；

Selector:disabled：满足选择器且当前处于不可用状态的元素；

Selector:checked：满足选择器且当前处于选中状态的元素；

Selector:default：满足选择器且页面打开时默认处于选中状态的元素；

Selector:read-only：满足选择器且处于只读状态的元素；

Selector:read-write：满足选择器且处于读写状态的元素；

Selector::selection：满足选择器的元素中被选中的内容(注意前面是两个冒号)；

Selector:target：满足选择器且是命名锚点目标的元素；

Selector1:not(Selector2)：满足选择器1且不满足选择器2的元素。