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

原文地址:https://www.cnblogs.com/yoran-yang/p/5308697.html