美文网首页
伪类和伪元素

伪类和伪元素

作者: lucky_果果 | 来源:发表于2019-11-30 02:11 被阅读0次

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

    伪元素:CSS 伪元素用于向某些选择器设置特殊效果。

    1、伪类:

    (1)锚伪类::link  \  :visited\  :hover\  :active

    a:link{color: #FF0000}/* 未访问的链接 */

    a:visited{color: #00FF00}/* 已访问的链接 */

    a:hover{color: #FF00FF}/* 鼠标移动到链接上 */

    a:active{color: #0000FF}

    (2)伪类与css类

    <a class="red" link="">  => a.red: visited {color: #FF0000}

    (3)  :first-child 伪类

    例如:

    1》匹配第一个p标签和第一个li标签

    p:first-child {font-weight: bold;}

    li:first-child {text-transform:uppercase;}

    2》匹配所有 <p> 元素中的第一个 <i> 元素

    p>i:first-child

    3》匹配第一个p标签中的所有i标签

    p:first-child i {  }

    (3):lang伪类

    匹配lang为no的标签,添加引号

    2、伪元素

    (1)为首行添加样式=》:first-line 伪元素

    (2)向文本的首字母艺添加样式:  :first-letter 伪元素

    (3)伪元素和 CSS 类 :      p.article:first-letter{ color: #FF0000; }   上面的例子会使所有 class 为 article 的段落的首字母变为红色

    (4)多重伪元素   首行+首字母

    (5):before 伪元素  ":before" 伪元素可以在元素的内容前面插入新内容。

    (6):after 伪元素    ":after" 伪元素可以在元素的内容之后插入新内容

    相关文章

      网友评论

          本文标题:伪类和伪元素

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