CSS选择器介绍

1、元素选择器

E{...}

2、属性选择器

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的字符串的元素起做用。

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

3、ID选择器

#ID{...}

4、CLASS选择器

.CLASS{...}

5、包含选择器

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

6、自选择器

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

7、兄弟选择器

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

8、选择器组合

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

9、伪元素选择器

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

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

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

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

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

10、结构性 伪类选择器

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{...}：对知足选择器且内部没有任何子元素的元素起做用。

11、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的元素。