Css 选择器总结

Posted zhchoutai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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{}

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




以上是关于Css 选择器总结的主要内容,如果未能解决你的问题,请参考以下文章

CSS基础总结 选择器

CSS 选择器学习总结

css选择器总结

CSS选择器总结

CSS伪类--锚伪类选择器(动态伪类选择器)-使用详细总结

CSS选择器总结