CSS3伪元素 ::first-letter ::first-line ::selection
首先，关于伪元素的语法：
有的时候单冒号也能用，但最好写双冒号。
伪类：匹配的是元素(不同状态或结构的)。
伪元素：匹配的是元素中的一部分内容(首字符，首行文本)。
::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的更多相关文章
- 使用 CSS3 伪元素实现立体的照片堆叠效
CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果
利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...
- CSS3伪元素、伪类选择器
伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...
- Css3 伪元素
伪元素---用于向某些选择器设置特殊的效果 语法:元素::伪元素 (element::pseudo-element) 兼容性:IE9+ FireFox4+ Chrome Safari Opera fi ...
- 基于CSS3伪元素和动画绘制旋转太极图
通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...
- css3 伪元素 ::before ::after
键代码分析: /*css代码*/ .effect::before, .effect::after{ content:""; position:absolute; z-index:- ...
- CSS3伪类和伪元素
作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
随机推荐
- Springboot项目整合Swagger2报错
SpringBoot2.2.6整合swagger2.2.2版本的问题,启动SpringBoot报如下错: Error starting ApplicationContext. To display t ...
- Jmeter各种组件
断言 用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致 参数化关联 参数化:指对每次发起的请求,参数名称相同,参数值进行替换,如登录三次系统,每次用不同的用户名和 ...
- 再看rabbitmq的交换器和队列的关系
最近又要用到rabbitmq,业务上要求服务器只发一次消息,需要多个客户端都去单独消费.但我们知道rabbitmq的机制里,每个队列里的消息只能消费一次,所以客户端要单独消费信息,就必须得每个客户端单 ...
- 2、尚硅谷_SSM高级整合_使用ajax操作实现页面的查询功能
16.尚硅谷_SSM高级整合_查询_返回分页的json数据.avi 在上一章节的操作中我们是将PageInfo对象存储在request域中,然后list页面解析request域中的对象实现信息的显示. ...
- 深度学习“四大名著”发布！Python、TensorFlow、机器学习、深度学习四件套！
Python 程序员深度学习的"四大名著": 这四本书着实很不错!我们都知道现在机器学习.深度学习的资料太多了,面对海量资源,往往陷入到"无从下手"的困惑出境. ...
- MySQL一招入门
连接mysql数据库命令:mysql -u root -p 创建mysql数据库:create databaase xx库; 创建mysql表: create table db_xx表( id int ...
- 119.杨辉三角II
这道题和第118题是一样的,需要注意这道题目对行数的要求 # 定义一个列表,用来存放数据 num_list = [] for index1 in ran ...
- 《UNIX环境高级编程》(APUE) 笔记第五章 - 标准I/O库
5 - 标准I/O库 Github 地址 1. 标准 I/O 库作用 缓冲区分配 以优化的块长度执行 I/O 等 使用户不必担心如何选择使用正确的块长度 标准 I/O 最终都要调用第三章中的 I/O ...
- Spring Aware介绍
读完这篇文章你将会收获到 Aware 的使用和介绍 BeanFactoryAware 的触发时机 ApplicationContextAware 的触发时机以及它通过扩展 BeanPostProces ...
- C#由转换二进制所引起的思考，了解下？
前言 最近遇到很有意思转换二进制的问题,有部分童鞋俨然已了解,可能也有一部分童鞋没碰到过也就不知情,这里我们来深入学习下转换二进制所带来的问题. 二进制转换问题 假设现在我们有一个int类型的数据,它 ...