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

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

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

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

::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. 计算机网络之ARP协议

    ARP ARP(Address Resolution Protocol),即地址解析协议,是根据IP地址解析物理地址的一个TCP/IP协议.主机将包含目标IP地址信息的ARP请求广播到网络中的所有主机 ...

  2. 入门大数据---Flume整合Kafka

    一.背景 先说一下,为什么要使用 Flume + Kafka? 以实时流处理项目为例,由于采集的数据量可能存在峰值和峰谷,假设是一个电商项目,那么峰值通常出现在秒杀时,这时如果直接将 Flume 聚合 ...

  3. 搞懂ELK并不是一件特别难的事（ELK）

    本篇文章主要介绍elk的一些框架组成,原理和实践,采用的ELK本版为7.7.0版本 一.ELK介绍 1.1.ELK简介 ELK是Elasticsearch.Logstash.Kibana三大开源框架首 ...

  4. AnalyticDB实现和特点浅析

    目录 AnalyticDB介绍与背景 AnalyticDB详细解析 架构设计 数据分区 读写分离和读写流程 其他特性介绍 混合(列-行)存储引擎 索引 小结 本篇主要是根据AnalyticDB的论文, ...

  5. 使用Tensorflow对模型进行量化

    本文旨在将迁移学习训练好的模型基于tensorflow工具进行量化. 环境配置及迁移学习部分可参考博文[https://www.cnblogs.com/hayley111/p/12887853.htm ...

  6. Apache DolphinScheduler(海豚调度) - 1.3 系列核心表结构剖析

    Apache DolphinScheduler 是一个分布式去中心化,易扩展的可视化 DAG 工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程中开箱即用. 近日 ...

  7. SQL注入原理及代码分析(一)

    前言 我们都知道,学安全,懂SQL注入是重中之重,因为即使是现在SQL注入漏洞依然存在,只是相对于之前现在挖SQL注入变的困难了.而且知识点比较多,所以在这里总结一下.通过构造有缺陷的代码,来理解常见 ...

  8. HDU3686 Traffic Real Time Query System 题解

    题目 City C is really a nightmare of all drivers for its traffic jams. To solve the traffic problem, t ...

  9. if-else和三目运算符 ? : 的对比

    今天的地铁思考让我想起一个之前学C语言的时候一直没有验证的事情:既生瑜何生亮? 平时写代码的时候,似乎并没有太多的关注我应该选用什么条件判断语句,感觉判断条件或者两条支路语句复杂就本能地if-else ...

  10. 查看sudo的history:配置sudolog

    sudo 权力很大,但责任更重大! We trust you have received the usual lecture from the local System Administrator. ...