前端知识路径之常用css选择器

这里将css选择器分为以下几类：

1.通过*或标签名来选择

2.通过标签的id和class选择，表现为#id和.class

3.通过标签之间的层级关系来选择

div p 选择div内的所有p标签

div>p 选择父元素为div的所有p标签

div+p 选择div之后的所有兄弟p标签

4.通过标签属性选择

[title]选择带有title属性所有标签

[title=abc]选择title 属性等于abc所有标签

[title~=abc]选择title 属性包含abc所有标签

[att^=abc]选择att 属性以abc开头的所有标签

[att$=abc]选择att 属性以abc结尾所有标签

[att|=abc] 选择 att 属性值以"-"分割，以 "en" 开头的所有元素

5.通过在a标签上的操作

a:link选择所有未被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:visited 选择所有已被访问的链接

a:active 选择活动链接

6.通过伪类选择

E:before  在每个 E 元素的内容之前插入内容

E:after    在每个 E 元素的内容之后插入内容

E:first-of-type   选择属于其父元素的首个 E 元素的所有 E 元素。

E:last-of-type   选择属于其父元素的最后 E 元素的所有 E 元素。

E:nth-of-type(n)  选择属于其父元素唯一的 E 元素的所有 E 元素

E:empty  选择没有子元素的每个 E 元素

E:checked  选择每个被选中的 E 元素

E:disabled  选择每个禁用的 E 元素

E:last-child  选择属于其父元素最后一个子元素的所有 E 元素

E:nth-child(n)  选择属于其父元素的第n个子元素的所有 E 元素