Css 选择器总结

选择器

.class

类对应的元素。

#id

对应的id元素。

*

全部元素

div{}

对应的标签

div,p{}

全部的div和p

div p{}

div下全部的p标签

div>p{}

div下的第一代子标签。

div+p{}

仅仅作用于div后一个p,假设后一个不是p则没有作用效果。

p~ul{}

选取同一个父元素的p之后全部的ul。

a[target]

作用于全部带target属性的a标签。

a[target=_blank]

作用于全部target属性值为_blank的元素。

[title*=flower]

匹配title中包括flower的元素。应用范围更广。

[title~=flower]

title中包括flower的对应元素。强调一整个的单词。

a[src$=".pdf"]

匹配属性src以.pdf结尾的a标签。

[lang^=en]

匹配以en开头的元素，不一定是单词。应用更广，比方en遇到enn匹配成功。可是lang|=则不成功。

[lang|=en]//|=以...开头

lang规定了元素的语言。

|=选取以en开头的对应的元素。

|=之后跟的是单词，通常应用于lang。

p:lang(en)//lang选择器

选择lang属性以en开头的p元素。

a：link

：link用于选取未訪问过的链接的元素。

a：visited

：visited用于选取訪问过的链接的元素。

a：active

：active选取活动链接时的状态，活动链接指的是点击后即为活动，能够按下鼠标不松开查看效果。

a：hover

:hover适用于全部元素，设置鼠标浮动在上面时的效果。

input：focus

当获得焦点时的状态，即点击输入框要用键盘输入时。

p:first-letter

为段落中的首字母设置效果。

p:first-line

为段落中的首行设置效果。

p:first-of-type

选取身份为父元素的首个p元素。

p:last-of-type

选取身份为父元素的最后一个p元素。

p:only-of-type

假设作为唯一的p子元素，则触发状态。

p:nth-of-type(2)

第二个p元素。

p:nth-last-of-type(2)

与上同理，倒着数。

p:first-child

选取身份为父元素的首个子元素的p标签。

p:last-child

最后一个子元素，且为p标签。

p:only-child

作为唯一的子元素。

p:nth-child(2)

作为父元素的第二个子元素，是p标签，则触发。

p:nth-last-child(2)

与上同理。从最后一个元素開始计数。

p:before

在每一个p元素前插入内容。

p:after

在每一个p元素之后插入内容。

:root

设置根元素。即html文档的属性。

p:empty

没有子元素的p元素。

:target

当前活动的锚，锚是本页面跳转的链接，活动的猫指的是点击锚点转到时被转到的地方被觉得是活动的。

:enabled

指示已启用的。经常使用于表单上。

:disabled

指示未启用的。同上。

:not(p)

除了p元素的全部元素

::selection{}

为页面上已选中的文字等设置样式。