微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

02-CSS基础与进阶-day3_2018-08-29-20-20-56

01伪元素选择器.html

分享图片

 

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 选择第一个*/
        p::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选择第一行*/
        p::first-line {
            color: blue;
        }
        
        /*中文字的时候 只能是字体颜色和背景色样式可以设置*/
        p::selection {
            color: pink;
            font-size: 42px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <p>
        freestyle,英语词汇,一般指即兴的、随性的随意的发挥,例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月,因吴亦凡在国产说唱综艺《中国有嘻哈》中屡次提起freestyle而火遍网络。
2017年12月18日,“你有freestyle吗?”入选国家语言资源监测与研究中心发布的2017年度十大网络用语”。
    </p>
</body>
</html>

 

02伪元素选择器2.html

分享图片

 

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*before和after表示在盒子内部前面插入或内部后面插入*/
       div::before {
           content: "俺";
       }
       div::after {
           content: "30出头";
       }
    </style>
</head>
<body>
    <div>今年</div>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。