HTML&CSS基础-伪元素选择器

　　　　　　　　　　　　　　　　　　　　HTML&CSS基础-伪元素选择器

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素</title>
        
        <style>
            /**
             *  伪元素选择器:
             *         使用伪元素来表示元素中的一些特殊的位置，对于IE6来说都是不支持的，要慎用哟~
             * 
             * 
             *     给段落定义样式:
             *         :first-letter
             *             给首字母
             *         :first-line
             *             给首行
             *         :before
             *             表示元素最前边的部分
             *         :after
             *             表示元素最后边的部分
             */
            
            /**
             *  让p元素第一个字符颜色变红，字体大小设置为20px
             */
            p:first-letter{
                color: red;
                font-size: 20px;
            }
            
            /**
             *     为p元素的第一行设置一个背景颜色为"黄色"
             */
            p:first-line{
                background-color: yellow;
            }
            
            /**
             *  一般before都需要结合conten这个样式一起使用，通过content可以向before或after的位置添加一些内容
             */
            p:before{
                content: "我会出现再整个段落的最前边";
            }
            
            /**
             *  一般after都需要结合conten这个样式一起使用，通过content可以向before或after的位置添加一些内容
             */
            p:after{
                content: "我会出现在整个段落的最后边";
                color: orange;
            }
        </style>
    </head>
    <body>
        
        <p>
            1925年，鲁迅在北京担任大学讲师期间，因支持学生运动而受到当时所谓“正人君子”的流言攻击和排挤。1926年，北洋军阀政府枪杀进步学生，制造“三·一八”惨案。作者鲁迅写下《纪念刘和珍君》等一系列文章，热情支持学生的正义斗争，控诉北洋军阀政府的残暴，结果遭到当局的通缉而不得不远走厦门避难。《朝花夕拾》中的作品虽然都是在追忆往事，但也是“借题发挥”，影射、讥讽当时的社会现实。
        </p>
         
        
        <p>
            民国二十五年（1936年）1月，肩及肋骨皆出现剧痛，最后的创新之作《故事新编》出版。2月，开始续译《死魂灵》第二部。5月15日再发病，医生诊断胃疾，自后发热未愈，5月31日，史沫特黎女士引美国邓医生来诊断，情况不乐观。6月，身体略有好转，鲁迅及身边的人都认为“鲁迅先生好了”。10月17日旧病复发，18日黎明前疾病发作，气喘不止。10月19日上午5时25分逝世。
        </p>
    </body>
</html>

 

二.浏览器打开以上代码渲染结果

 

posted @ 2017-01-05 10:16  尹正杰  阅读(857)  评论(0)  编辑  收藏  举报