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>

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

HTML&CSS基础-伪元素选择器的更多相关文章

  1. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  2. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  3. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  4. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  6. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  7. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  8. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  9. HTML&CSS基础-子元素和后代元素选择器

    HTML&CSS基础-子元素和后代元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html ...

随机推荐

  1. mysql8忘记秘密-重置密码步骤

    mysql8修改密码的方式有些许不同 1.配置无密码登录 修改/etc/my.cnf文件,在mysqld模块下添加 skip-grant-tables 2.重启mysql 3.mysql -uroot ...

  2. ou can mix require and export. You can't mix import and module.exports.

    ou can mix require and export. You can't mix import and module.exports.

  3. RAID磁盘阵列结构

    RAID磁盘阵列结构原理其实很简单,就是每块硬盘不插在主板的硬盘接口上了,而是全插在RAID卡上,然后RAID卡再插到主板上,由RAID卡统一管理硬盘,做各种RAID磁盘策略(RAID0,RAID1, ...

  4. 浅谈Java中的Condition条件队列，手摸手带你实现一个阻塞队列！

    条件队列是什么?可能很多人和我一样答不出来,不过今天终于搞清楚了! 什么是条件队列 条件队列:当某个线程调用了wait方法,或者通过Condition对象调用了await相关方法,线程就会进入阻塞状态 ...

  5. 【RSR】RSR如何配置BGP与BFD联动(动态路由)

    应用场景 企业租用运营商MSTP线路,配置BGP路由协议上网,由于企业本端出口路由器无法检测到运营商中间链路通信中断,导致路由收敛缓慢,无法快速的切换到其它备份线路,此时可以在路由器上启用BGP与BF ...

  6. 微前端框架 single-spa

    单体应用对比前端微服务化 普通的前端单体应用 微前端架构 1.基本概念 实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/) 加载器 ...

  7. win10 远程连接怎么设置快捷方式

    在桌面空白处右键,选择新建快捷方式,然后输入命令:C:\windows\system32\mstsc.exe,点击下一步,然后输入快捷方式名称:远程连接,点击确定即可.

  8. 嵌入式02 STM32 实验02 端口输入输出各4种模式

    GPIO(General-purpose input/output 通用目的输入/输出端口) 电压(A模拟量)与电平(D数字量) GPIO 8种工作模式(输入四种.输出四种) 1.GPIO_Mode_ ...

  9. CSS中position和float的使用

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  10. as3鱼眼放大镜

    package { //hi.baidu.com/inuko //bitmapdata fisheye magnifier //原创代码,如有雷同,纯属巧合 /* 本例是使用近似算法,只是最简单的鱼眼 ...