学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(二十一) 伪元素

发布时间:2020-01-17点击:

    CSS伪元素是用来添加一些选择器的特殊效果。

    一、:first-line 伪元素

    "first-line" 伪元素用于向文本的首行设置特殊样式。

    在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:

    p:first-line 
    {
        color:#ff0000;
        font-variant:small-caps;
    }

    PS:"first-line" 伪元素只能用于块级元素。

    下面的属性可应用于 "first-line" 伪元素:

    • font properties
    • color properties
    • background properties
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

    二、:first-letter 伪元素

    "first-letter" 伪元素用于向文本的首字母设置特殊样式:

    p:first-letter 
    {
        color:#ff0000;
        font-size:xx-large;
    }

    PS: "first-letter" 伪元素只能用于块级元素。

    下面的属性可应用于 "first-letter" 伪元素:

    • font properties
    • color properties
    • background properties
    • margin properties
    • padding properties
    • border properties
    • text-decoration
    • vertical-align (only if "float" is "none")
    • text-transform
    • line-height
    • float
    • clear

    三、CSS - :before 伪元素

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

    下面的例子在每个 <h1>元素前面插入一幅图片:

    h1:before 
    {
        content:url(smiley.gif);
    }

    四、CSS - :after 伪元素

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

    下面的例子在每个 <h1> 元素后面插入一幅图片:

    h1:after
    {
        content:url(smiley.gif);
    }

    五、伪类与伪元素一览表

    序号
    伪元素或伪类
    说明
    1
    :link
    选择链接中未访问的链接
    2
    :visited
    选择链接中访问过的链接
    3
    :active
    选择链接中正在活动的链接
    4
    :hover
    选择连接中鼠标正在上面的链接
    5
    :focus
    选择元素输入后具有焦点
    6
    :first-letter
    选择元素的第一个字母
    7
    :first-line
    选择元素的第一行
    8
    :first:child
    选择元素中的第一个子节点
    9
    :before
    选择在元素节点之前插入
    10
    :after
    选择在元素节点之后插入
    11
    :lang
    为元素的lang属性选择一个值
    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接