首先，关于伪元素的语法：

有的时候单冒号也能用，但最好写双冒号。

伪类：匹配的是元素(不同状态或结构的)。

伪元素：匹配的是元素中的一部分内容(首字符，首行文本)。

::first-letter

匹配 某元素的 首字符。

例：

<!DOCTYPE html>

<html>

<head>

    <title>test010_伪元素选择器_::first-letter</title>

    <style type="text/css">

        p::first-letter{

            color:red;

        }

    </style>

</head>

<body>

    <p>hello world</p>

</body>

</html>

结果：

::first-line

匹配 某元素的 首行文本。

::selection

匹配 被用户选取的 部分。

例：

<!DOCTYPE html>

<html>

<head>

    <title>test012_伪元素选择器_::selection</title>

    <style type="text/css">

        p::first-line{

            color:red;

        }

        p::selection{

            background-color: orange;

            color:#e1e1e1;

        }

    </style>

</head>

    <script type="text/javascript">

    </script>

<body>

    <p>hello world

        <br>

        world is mine

    </p>

</body>

</html>

结果：

注意：当你修改 ::selection 样式后，浏览器自带的 ::selection会失效。

比如，浏览器默认的::selection是蓝底白字，而你只是把蓝底改成了红底，那么，浏览器自带的白字设置会失效。

CSS3伪元素 ::first-letter ::first-line ::selection的更多相关文章

  1. 使用 CSS3 伪元素实现立体的照片堆叠效

    CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...

  2. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  3. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  4. CSS3伪元素、伪类选择器

    伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

  5. Css3 伪元素

    伪元素---用于向某些选择器设置特殊的效果 语法:元素::伪元素 (element::pseudo-element) 兼容性:IE9+ FireFox4+ Chrome Safari Opera fi ...

  6. 基于CSS3伪元素和动画绘制旋转太极图

    通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...

  7. css3 伪元素 ::before ::after

    键代码分析: /*css代码*/ .effect::before, .effect::after{ content:""; position:absolute; z-index:- ...

  8. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  9. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

随机推荐

  1. elasticsearch中query和filter的区别

    参考博客来自: https://mp.weixin.qq.com/s/tiiveCW3W-oDIgxvlwsmXA?utm_medium=hao.caibaojian.com&utm_sour ...

  2. 技术干货丨卷积神经网络之LeNet-5迁移实践案例

    摘要:LeNet-5是Yann LeCun在1998年设计的用于手写数字识别的卷积神经网络,当年美国大多数银行就是用它来识别支票上面的手写数字的,它是早期卷积神经网络中最有代表性的实验系统之一.可以说 ...

  3. Python实用笔记 （26）面向对象高级编程——定制类

    Python的class允许定义许多定制方法,可以让我们非常方便地生成特定的类.以下是集中常见的定制方法: 怎么才能打印得好看呢?只需要定义好__str__()方法,返回一个好看的字符串就可以了: _ ...

  4. Linux虚拟网络：Docker网络知识之基础篇

    我们在工作中应用了docker容器化技术,服务的部署.维护和扩展都方便了很多.然而,近期在私有化部署过程中,由于不同服务器环境的复杂多变,常常遇到网络方面的问题,现象为容器服务运行正常,但宿主机.容器 ...

  5. Spring Cloud Alibaba基础教程：Nacos 生产级版本 0.8.0

    昨晚Nacos社区发布了第一个生产级版本:0.8.0.由于该版本除了Bug修复之外,还提供了几个生产管理非常重要的特性,所以觉得还是有必要写一篇讲讲这次升级,在后续的文章中也都将以0.8.0版本为基础 ...

  6. 关于CSS自文档的思考_css声明式语言式代码注释

    obert C. Martin写的<Clean Code>是我读过的最好的编程书籍之一,若没有读过,推荐你将它加入书单. 注释就意味着代码无法自说明 —— Robert C. Martin ...

  7. 免费馅饼——移动dp

    免费馅饼 题目描述 SERKOI最新推出了一种叫做"免费馅饼"的游戏: 游戏在一个舞台上进行.舞台的宽度为 \(W\) 格,天幕的高度为 \(H\) 格,游戏者占一格. 开始时游戏 ...

  8. 51Nod 1534 棋子游戏 题解

    题目 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们玩了一个游戏,这个游戏在一个很大的棋盘上进行,他们每个人有一个棋子.他们轮流移动自己的棋子,波雷卡普先开始.每一步移动中,波雷卡普可以将他的棋子从(x ...

  9. HDU - 5963 朋友（思维题）

    题干 B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根.接下来从女生开始,双 ...

  10. 题解：2018级算法第一次上机 C1-pair

    题目描述 北航2018级软件学院算法分析与设计第一次上机第三题 样例 实现解释 题目类型: 这类题目其实就是典型的递归分析语句形式的问题,也是编译原理课程中语法分析的重要方法之一. 解决方案: 为了解 ...