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 ...
随机推荐
- 团队进行Alpha冲刺--冲刺总结
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--冲刺总结 作业正文 如下 其他参 ...
- 138 张图带你 MySQL 入门
SQL 基础使用 MySQL 是一种关系型数据库,说到关系,那么就离不开表与表之间的关系,而最能体现这种关系的其实就是我们接下来需要介绍的主角 SQL,SQL 的全称是 Structure Query ...
- mysql定时备份任务
简介 在生产环境上,为了避免数据的丢失,通常情况下都会定时的对数据库进行备份.而Linux的crontab指令则可以帮助我们实现对数据库定时进行备份.首先我们来简单了解crontab指令,如果你会了请 ...
- SpringBoot — HelloWorld开发部署
springboot官方推荐使用jdk1.8 一.配置pom.xml 二.Application.java 三.HelloController.java 四.项目运行: Application.jav ...
- 深度解剖dubbo源码---01dubbo的架构原理-探索.mp4
02内核解剖-dubbo自己的SPI实现.mp4 https://blog.csdn.net/prestigeding/article/details/80795708 https://segment ...
- sql 更新时 实现 数字字段自加1
第一种:直接使用SQL语句,这种方式可以避免并发操作造成的数据不一致问题UPDATE 表名称 SET 列名称 = 列名称 + 1 WHERE …… 第二种:将上面的语句逻辑封装成一个存储过程,加上事务 ...
- 强大的 actuator 服务监控与管理
SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...
- 真的可以，用C语言实现面向对象编程OOP
ID:技术让梦想更伟大 作者:李肖遥 解释区分一下C语言和OOP 我们经常说C语言是面向过程的,而C++是面向对象的,然而何为面向对象,什么又是面向过程呢?不管怎么样,我们最原始的目标只有一个就是实现 ...
- 如何利用.NETCore向Azure EventHubs准实时批量发送数据？
最近在做一个基于Azure云的物联网分析项目: .netcore采集程序向Azure事件中心(EventHubs)发送数据,通过Azure EventHubs Capture转储到Azure Blog ...
- Demo_2：Qt实现猜字小游戏
1 环境 系统:windows 10 代码编写运行环境:Qt Creator 4.4.1 (community) Github: 2 简介 参考视频:https://www.bilibili.co ...