美文网首页
css伪类与伪元素

css伪类与伪元素

作者: 我性本傲 | 来源:发表于2019-03-06 16:11 被阅读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伪元素

    伪类与类优先级相同 

    伪元素与标签优先级相同

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

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

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

    相关文章

      网友评论

          本文标题:css伪类与伪元素

          本文链接:https://www.haomeiwen.com/subject/gycxpqtx.html