PHP MySQL jquery HTML CSS

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class CSS 创建 CSS Backgrounds(背景) CSS text（文本） CSS Fonts (字体) CSS 链接（link） CSS 列表样式（ul） CSS Table(表格) CSS 盒子模型 CSS Border (边框) CSS 轮廓（outlines）属性 CSS Margin(外边距) CSS Padding（填充） CSS 分组和嵌套 CSS 尺寸 (Dimension) CSS Display(显示) CSS Positioning(定位) CSS Float(浮动) CSS Align(对齐) CSS 组合选择符 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 总结 CSS 实例 Viewport 网格视图媒体查询图片视频(Video) 框架

CSS 教程

CSS 响应式设计

Viewport 网格视图媒体查询图片视频(Video) 框架

CSS 参考手册

CSS 在线手册

更新时间2022-04-11

CSS 伪类 CSS 导航栏

CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>可以使用:first-line伪元素为文本的第一行添加特殊效果。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
</p>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意："first-line" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-line" 伪元素：

font属性
color 属性
background属性
word-spacing属性
letter-spacing属性
text-decoration属性
vertical-align属性
text-transform属性
line-height属性
clear属性

:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式！</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意： "first-letter" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-letter" 伪元素：

font属性
color属性
background属性
margin属性
padding属性
border属性
text-decoration属性
vertical-align属性(仅当“float：none”时)
text-transform属性
line-height属性
float属性
clear属性

伪元素和CSS类

伪元素可以结合CSS类：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多个伪元素

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。

段落中的其余文本将以默认字体大小和颜色来显示：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1>元素前面插入一幅图片：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.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 - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.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伪类/元素

选择器	示例	示例说明
: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属性选择一个开始值