<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 伪元素</title>
<style>
p.ex1:first-line{
color: #FF00FF;
font-variant: small-caps;
}
p.ex2:first-letter{
color: #2196F3;
font-size: 400%;
}
p.ex3:first-line{
color: #2196F3;
font-variant: small-caps;
}
p.ex3:first-letter{
color: #0000ff;
font-size: xx-large;
}
p.ex4:before{
content: url("http://www.runoob.com/images/logo.png");
}
p.ex5:after{
content: url("http://www.runoob.com/images/logo.png");
}
</style>
</head>
<body>
<h2>first-line</h2>
<p class="ex1">
你可以使用first-line伪元素向文本的首行设置特殊样式
你可以使用first-line伪元素向文本的首行设置特殊样式
你可以使用first-line伪元素向文本的首行设置特殊样式</p>
<h2>first-letter</h2>
<p class="ex2">
你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式
你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式
你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式
</p>
<h2>多个伪元素</h2>
<p class="ex3">
你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母
设置特殊样式
你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母
设置特殊样式
</p>
<h2>before</h2>
<p class="ex4">
你可以使用 "before" 伪元素向文本的前面插入图片
你可以使用 "before" 伪元素向文本的前面插入图片
你可以使用 "before" 伪元素向文本的前面插入图片
</p>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
<h2>after</h2>
<p class="ex5">
你可以使用 "before" 伪元素向文本的后面插入图片
你可以使用 "before" 伪元素向文本的后面插入图片
你可以使用 "before" 伪元素向文本的后面插入图片
</p>
</body>
</html>
<!--
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
-->
<!--
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
实例
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
注意："first-line" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
-->
<!--
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
实例
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
尝试一下 »
注意： "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
-->
<!--
伪元素和CSS类
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
-->
<!--
多个伪元素
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。
第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
实例
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
-->
<!--
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
实例
h1:before
{
content:url(smiley.gif);
}
-->
<!--
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
实例
h1:after
{
content:url(smiley.gif);
}
-->
<!--
所有CSS伪类/元素
选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值
-->
<!--
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，
而不是元素的id、class、属性等静态的标志。
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；
当状态改变时，它又会失去这个样式。
由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，
它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。
实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，
选取某些内容前面或后面这种普通的选择器无法完成的工作。
它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，
并不存在于文档中，所以叫伪元素。
-->
网友评论