CSS伪元素

时间  2019-11-07
标签 css 元素 栏目 CSS 繁體版
原文   原文链接 
<!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>伪元素</title>
    <style>
        p::first-letter{
            color: red;
        }
        P.line::first-line{
            color: red;
        }
        h1::before{
            content: '[]';
            color: red;
        }
        h2::after{
            content: '[]';
            color: skyblue;
        }
    </style>
</head>
<body>
    <!--伪元素：伪类使用一个冒号，而伪元素使用两个冒号，css2定义了四个伪元素，分别用于装饰元素的首字母、首行，以及建立和装饰“前置”和“后置”
        内容。伪元素和伪类很像，它在文档中插入虚构的元素。
        注意：全部伪元素必须出如今选择器的最后。例如P::first-line span是无效的-->

    <!-- 1. ::first-letter伪元素用于装饰任何非行内元素的首字母，或者开头的标点符号和首字母(若是文本以标点符号开头) -->
    <!-- 例以下面的例子，将把每一段的首字母设为红色 -->
    <p>hello</p>
    <p>world</p>
    <!-- 这个规则实际上至关于让浏览器装饰每个p元素中包围首字母的一个虚构元素。例如： -->
    <p><p-first-letter>h</p-first-letter>llo</p>
    <p><p-first-letter>w</p-first-letter>orld</p>
    <!--::first-letter样式只应用到上面那个虚构的元素里面的内容。<p-first-letter>元素不会出如今源码中，也不会出如今DOM树中
        而是让浏览器动态构建，目的是把::first-letter的样式应用到相应的文本上。也即，<p-first-letter>是一个伪元素。 -->

    <!-- 2. ::first-line用于装饰元素的首行文本 -->
    <!-- 能够看到下面id为line的p元素中换行符前面的那一行文本变成了红色-->
    <p class="line">
        关于华为鸿蒙系统，另据国外媒体Huawei Central报道，有知情人士透露，华为的自<br>
        研操做系统鸿蒙OS已经在小规模的测试之中，知情人士表示，这款华为新机颇有可能
    </p>
    <!-- 对::first-letter和::first-line的限制  目前这两个伪元素只能应用到块级元素上，例如标题或者段落，不能应用到
            行内元素上，例如span元素等。-->

    <!-- 3.装饰元素的前置或者后置内容能够使用伪元素::before ::after -->
    <!-- 例如想要在h1元素前面增长一个括号 h1::before{content: '[]';color: red;}-->
    <h1>china</h1>
    <!-- 想要把内容放入元素的后面能够使用::after伪元素 h2::after{content:'[]';color: skyblue;-->
    <h2>css tricks</h2>
</body>
</html>
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程