zoukankan      html  css  js  c++  java
  • 前端 CSS的选择器 伪元素选择器

    介绍常用的伪元素。

    after用得比较多的

    first-letter

    用于为文本的第一个首字母设置样式。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <style type="text/css">
    
            /* 设置第一个首字母的样式*/
            p:first-letter{
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是一个段落</p>
        </div>
    </body>
    </html>

    before

    用于在元素的内容前面插入新内容

    使用此伪元素选择器一定要结合content属性

    在每个<p>元素之前插入内容:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <style type="text/css">
    
            /* 用于在元素的内容前面插入新内容*/
            p:before{
                content: 'mike';
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是一个段落</p>
        </div>
    </body>
    </html>

    after

    用在网页布局比较多,清除浮动

    用于在元素的内容后面插入新内容。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <style type="text/css">
    
            /* 用于在元素的内容后面插入新内容*/
            p:after{
                content: '&';
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是一个段落</p>
        </div>
    </body>
    </html>
    在每个<p>元素之后插入内容

  • 相关阅读:
    关于JDK 安装,以及Java环境的设置
    DHCP snooping
    解除破解正版Kindle电子书籍的版权限制
    广东地区电信官方DNS服务器
    Bash脚本15分钟进阶指导
    视听说英语
    华中师大2013新生群
    【强网杯2018】Gamebox
    【强网杯2018】逆向hide
    【Wechall.net挑战】Anderson Application Auditing
  • 原文地址:https://www.cnblogs.com/mingerlcm/p/10803042.html
Copyright © 2011-2022 走看看