css伪类与伪元素

2019-03-06  本文已影响0人  我性本傲


css装备部

CSS伪类:用于向某些选择器添加特殊的效果。

:hover            将样式添加到鼠标悬浮的元素

:active            将样式添加到被激活的元素

:link                将样式添加到未被访问过的链接

:visited           将样式添加到被访问过的链接

:focus            将样式添加到获得焦点的元素

:first-child      将样式添加到元素的第一个子元素

:lang              定义指定的元素中使用的语言

css3新增的伪类

p:first-of-type

选择属于其父元素的首个<p>元素的每个<p>元素。

p:last-of-type

选择属于其父元素的最后<p>元素的每个<p>元素。

p:only-of-type

选择属于其父元素唯一的<p>元素的每个<p>元素。

p:only-child

选择属于其父元素唯一的子元素的每个<p>元素。

p:nth-child(n)

选择属于其父元素的第n个子元素的每个<p>元素。

p:nth-last-child(n)

选择属于其父元素的倒数第n个子元素的每个<p>元素。

p:nth-of-type(n)

选择属于其父元素第n个<p>元素的每个<p>元素。

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

选择属于其父元素倒数第n个<p>元素的每个<p>元素。

p:last-child

选择属于其父元素最后一个子元素的每个<p>元素。

p:empty

选择没有子元素的每个<p>元素(包括文本节点)。

p:target 

选择当前活动的<p>元素。

:not(p)

选择非<p>元素的每个元素。

:enabled

控制表单控件的可用状态。

:disabled 

控制表单控件的禁用状态。

:checked 

单选框或复选框被选中。

CSS伪元素:用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

::first-letter        将样式添加到文本的首字母

::first-line          将样式添加到文本的首行

::before            在某元素之前插入某些内容

::after               在某元素之后插入某些内容

伪类与伪元素的区别

单冒号(:)用于CSS3伪类

双冒号(::)用于CSS3伪元素

伪类与类优先级相同 

伪元素与标签优先级相同

伪类的效果可以通过添加实际的类来实现 

伪元素的效果可以通过添加实际的元素来实现 

伪元素在一个选择器中只能出现一次,并且只能出现在末尾 

上一篇下一篇

猜你喜欢

热点阅读