一、  ::first-letter 第一个字

二、 ::first-line 第一行（以浏览器为准的第一行）

三、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

<body>

    <p>微软的 Internet Explorer(IE) 是当今最流行的因特网浏览器。它发布于 1995 年，并于 1998 年在使用人数上超过了 Netscape。Firefox 是由 Mozilla 发展而来的新式浏览器。
它发布于 2004 年，并已成长为因特网上第二大最流行的浏览器。Opera 是挪威人发明的因特网浏览器。它以下列特性而闻名于世：快速小巧、符合工业标准、适用于多种操作系统。对于一系列小型
设备诸如手机和掌上电脑来说，Opera 无疑是首选的浏览器。Chrome 是免费的开源 web 浏览器，它由 Google 开发。该浏览器于 2008 年 9 月发布。Chrome 4 是最新的谷歌浏览器Safari 是
由苹果公司开发的浏览器，适用于 Mac 和 Windows 系统。该浏览器于 2003 年 6 月发布。</p>

</body>
<style>

        p::first-letter{

            /* 第一个字母 */

            font-size: 50px;

        }

        p::first-line{

            /* 第一行（以浏览器为准的第一行） */

            background: rgb(199, 24, 24);

        }

         /* 被选中的字行（鼠标选中的字段） */

        p::selection{

           background: #48ff00;

        }

        ::-moz-selection{

            /* 兼容 */

            background: #48ff00;

        }

</style>

四、 ::before 和 ::after

1. 必须带一个属性content

2.在内部内容的前面或者后面插入内容

<div>必须带一个属性content</div>
 div::before {

            content: "我是插入的内容";

            background: #572eb8;

        }

3.当插入的内容定义宽高和其他属性时，其实就是一个盒子（必须通过display转换，因为默认是一个行内元素）。

<body>

    <div>盒子1</div>

</body>
        div{

            width: 500px;

            height: 500px;

            border: 1px solid #000;

        }

        div::before{

            content: "插入的盒子";

            display: block;

            width: 200px;

            height: 200px;

            background: rgb(211, 29, 29);

        }

4.上述可以解释清除浮动的后面两种方法，单伪元素法和双伪元素法（清除浮动的四种方法：额外标签法，overflow：hidden，单伪元素法和双伪元素法）

五、在字体图标里的运用，直接写入css里，不需要在HTML插入（之前的方法：字体图标）

<body>

  <input type="text"><span></span>

</body>
       @font-face {

            font-family: 'icomoon';

            src: url('fonts/icomoon.eot?vhnprv');

            src: url('fonts/icomoon.eot?vhnprv#iefix') format('embedded-       opentype'),

            url('fonts/icomoon.ttf?vhnprv') format('truetype'),

            url('fonts/icomoon.woff?vhnprv') format('woff'),

            url('fonts/icomoon.svg?vhnprv#icomoon') format('svg');

            font-weight: normal;

            font-style: normal;

        }

        span {

            position: relative;

        }

        span::after {

            content: "\e986";

            font-family: "icomoon";

            position: absolute;

            left: -20px;

            top:;

        }

当然还有其他做法，比如直接在span里放入字体图标，然后定位，或者直接用背景图。

CSS3新增选择器：伪元素选择器的更多相关文章

  1. css3系列之伪元素选择器

    Pseudo-Element Selectors(伪元素选择器) E::placeholder E::selection E::placeholder 这个选择器是选啥的呢, 是选 input 里面的 ...

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

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

  3. 前端-CSS-4-伪类选择器&伪元素选择器

    1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...

  4. css 选择器 & UI元素的伪类选择器 & 伪元素选择器

    UI元素的伪类选择器 1. :focus  用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable  用来指定元素处于不可用时的状态    表单里应用 ...

  5. 前端 CSS的选择器 伪元素选择器

    介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...

  6. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  7. python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）

    11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...

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

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

  9. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  10. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

随机推荐

  1. H5新特性 本地存储---cookie localStorage sessionStorage

    本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...

  2. 「CTS2019」珍珠

    「CTS2019」珍珠 解题思路 看了好多博客才会,问题即要求有多少种方案满足数量为奇数的变量数 \(\leq n-2m\).考虑容斥,令 \(F(k)\) 为恰好有 \(n\) 个变量数量为奇数的方 ...

  3. Matalb中英双语手册-年少无知翻译版本

    更新: 20171207: 这是大学期间参加数模翻译的手册 正文: 愚人节快乐,突然发现自己在博客园的一篇文章.摘取如下: MATLAB 语言是一种工程语言,语法很像 VB 和 C,比 R 语言容易学 ...

  4. ABP 基于DDD的.NET开发框架 学习（六）创建新动态Api

    我们想要这个服务暴露成一个Web API控制器,以方便客户端调用.ASP.NET Boilerplate能够自动且动态地为这个应用服务创建Web API 控制器,只需要一行配置代码即可完成. Dyna ...

  5. web API .net - .net core 对比学习-使用Swagger

    根据前两篇的介绍,我们知道.net web api 和 .net core web api在配置方面的不同如下: 1. .net web api的配置是在 App_Stat文件夹里面添加对应的配置类, ...

  6. 用java代码实现构造目录树

    怎么用java代码实现上面这样的目录树? 首先创建数据表 每条数据记录自己的id以及父节点的id 然后进入java代码部分: public String directory(String author ...

  7. k8s pv无法删除问题

    一般删除步骤为:先删pod再删pvc最后删pv 但是遇到pv始终处于“Terminating”状态,而且delete不掉.如下图: 解决方法: 直接删除k8s中的记录: kubectl patch p ...

  8. web-mini框架的基本实现（一）

    本篇主要介绍WSGI-web-mini框架的基本实现,以及什么是WSGI协议.对于浏览器的资源请求服务端是如何处理的等相关知识: 一.浏览器资源请求 我们知道浏览器和web服务器之间是基于HTTP协议 ...

  9. Linux命令——dumpe2fs

    参考:Linux磁盘管理——Ext2文件系统 简介 dumpe2fs用于查询 Ext 家族 superblock以及GDT(Group Descriptor Table,块组描述符表) 信息. 用法 ...

  10. LB_Keogh

    LB_Keogh LB_Keogh 是Keogh设计的下界函数,相比于LB_Kim以及LB_Yi具有更好的效果. 公式 注释: 上面公式中的 u 和 l 指的是上下包络线 对公式解释一下,其实就是,首 ...