标签即元素,元素即标签
什么是伪元素?
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
语法
伪元素的语法:
selector::pseudo-element {
property: value;
}
::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。
下面的例子为所有 <p> 元素中的首行添加样式:
实例
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
注意:::first-line
伪元素只能应用于块级元素。
以下属性适用于 ::first-line 伪元素:
- 字体属性
- 颜色属性
- 背景属性
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
请注意双冒号表示法 - ::first-line 对比 :first-line
在 CSS3 中,双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中,伪类和伪元素都使用了单冒号语法。
为了向后兼容,CSS2 和 CSS1 伪元素可接受单冒号语法。
::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。
下面的例子设置所有 <p> 元素中文本的首字母格式:
实例
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
注意:::first-letter 伪元素只适用于块级元素。
下面的属性适用于 ::first-letter 伪元素:
- 字体属性
- 颜色属性
- 背景属性
- 外边距属性
- 内边距属性
- 边框属性
- text-decoration
- vertical-align(仅当 "float" 为 "none")
- text-transform
- line-height
- float
- clear
伪元素可以与 CSS 类结合使用:
实例
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
上面的例子将以红色和较大的字体显示 class="intro" 的段落的首字母。
CSS - ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
下面的例子在每个 <h1> 元素的内容之前插入一幅图像:
实例
h1::before {
content: url(smiley.gif);
}
CSS - ::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。
下面的例子在每个 <h1> 元素的内容之后插入一幅图像:
实例
h1::after {
content: url(smiley.gif);
}
CSS - ::selection 伪元素
::selection 伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用于 ::selection:
- color
- background
- cursor
- outline
下例使所选文本在黄色背景上显示为红色:
实例
::selection {
color: red;
background: yellow;
}
所有 CSS 伪元素
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 <p> 元素之后插入内容。 |
::before | p::before | 在每个 <p> 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 <p> 元素的首字母。 |
::first-line | p::first-line | 选择每个 <p> 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* 为p中第一个字符来设置一个特殊的样式
*/
p:first-letter{
color: red;
font-size: 20px;
}
/**
* 为p中第一行设置背景颜色
*/
p:first-line{
background-color: yellow;
}
/**
* :before表示元素最前边的部分
* - 一般before都需要结合content这个样式一起使用
* - 通过content可以向before或after的位置添加一些内容
* :after表示元素的最后边的部分
*/
p:before{
content: "我是添加的内容999";
color: red;
}
</style>
</head>
<body>
<p>
将进酒·君不见,黄河之水天上来,奔流到海不复回。
君不见,高堂明镜悲白发,朝如青丝暮成雪。
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。
与君歌一曲,请君为我倾耳听。
钟鼓馔玉不足贵,但愿长醉不复醒。
古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐,斗酒十千恣欢谑。
主人何为言少钱,径须沽取对君酌。
五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。
</p>
</body>
</html>