CSS 的伪元素是什么？
CSS伪元素是用来添加一些选择器的特殊效果。用于：向某个选择器中的文字的首行。
㈠语法
①伪元素的语法：
selector:pseudo-element {property:value;}
②CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
㈡:first-line 伪元素
⑴"first-line" 伪元素用于向文本的首行设置特殊样式。
⑵"first-line" 伪元素只能用于块级元素。
⑶下面的属性可应用于 "first-line" 伪元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
⑷示例：浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-line</title>
<style>
p:first-line
{
color:deeppink;
font-variant:small-caps;
}
</style>
</head> <body>
<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
</body>
</html>
效果图：
㈢:first-letter 伪元素
⑴"first-letter" 伪元素用于向文本的首字母设置特殊样式
⑵"first-letter" 伪元素只能用于块级元素。
⑶下面的属性可应用于 "first-letter" 伪元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
⑷示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首字母特殊样式</title>
<style>
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
</head> <body>
<p>用美好的心情去面对接下来会发生的每一件事。</p>
</body>
</html>
效果图：
㈣伪元素和CSS类
伪元素可以结合CSS类
示例：使所有 class 为 article 的段落的首字母变为红色。
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
㈤多个伪元素
示例：段落的第一个字母将显示为红色，其字体大小为 xx-large。
第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合示例</title>
<style>
p:first-letter
{
color:deeppink;
font-size:xx-large;
}
p:first-line
{
color:blue;
font-variant:small-caps;
}
</style>
</head> <body>
<p>洗尽铅华始见金，褪去浮华归本真</p>
</body>
</html>
效果图：
㈥CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>：before</title>
<style>
h1:before {content:url(smiley.gif);}
</style>
</head> <body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>
效果图：
㈦CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>：after</title>
<style>
h1:after {content:url(smiley.gif);}
</style>
</head> <body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>
效果图：
㈧所有CSS伪类/元素
CSS 的伪元素是什么？的更多相关文章
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- CSS的伪元素（二）
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...
- css的伪元素
这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- 笑谈CSS的伪元素
今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
随机推荐
- xshell设置
登录脚本: #定义rz,sz自动下载路径 #保持窗口活动状态, 空闲时每120秒发送一个回车
- 2019icpc南昌邀请赛B Polynomial （拉格朗日插值法）
题目链接:https://nanti.jisuanke.com/t/40254 题意: 思路: 这题要用到拉格朗日插值法,网上查了一下,找到一份讲得特别好的: -------------------- ...
- [Python3] 036 函数式编程 返回函数
目录 函数式编程 之 返回函数 1. 引子 2. 闭包 closure 函数式编程 之 返回函数 函数可以返回具体的值 也可以返回一个函数作为结果 1. 引子 1.1 定义一个普通函数 >> ...
- // TODO Auto-generated method stub 作用及设置
当我们创建一个主方法类时,eclipse会默认插入一条注释语句: // TODO Auto-generated method stub 作用: // TODO Auto-generated metho ...
- thinkphp6下无法获取header头中的Authorization(apache版)
今天遇到在thinkphp框架中获取不到header头里边的 Authorization ,后来在.htaccess里面加多一项解决,记录下: <IfModule mod_rewrite.c&g ...
- Python中的xrld模块
一. 什么是xrld模块 python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 二. 使用介绍 . empty(空的), number, ...
- mysql设计与优化以及数据库表设计与表开发规范
一.设计问题? 1.主键是用自增还是UUID ? Innodb 中的主键是聚簇索引. 如果主键是自增的,那么每次插入新的记录,记录就会顺序添加到当前索引节点的后续位置,当一页写满,就会自动开辟一个新的 ...
- PHP之常用操作
在最高权限下执行相关命令 1)查看PHP配置 php --ini Configuration File (php.ini) Path: /www/server/php//etc Loaded Conf ...
- css简单动画（transition属性）
一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性:transition-property 过渡效果的 CSS 属性的名称(height ...
- 内存不足导致mysql关闭，CentOS6.5增加swap分区
某日发现mysql自动关闭了,查找错误日志发现以下错误 2017-07-14 13:07:30 5494 [Note] InnoDB: Initializing buffer pool, size = ...