css伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法:
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;}文章段落
上面的例子会使所有 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:before { content:url(smiley.gif);}
尝试一下 »
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个
元素后面插入一幅图片:
实例
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 | 选择每个 元素的第一个字母 |
:first-line | p:first-line | 选择每个 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 元素 |
:before | p:before | 在每个 元素之前插入内容 |
:after | p:after | 在每个 元素之后插入内容 |
:lang(language) | p:lang(it) | 为 元素的lang属性选择一个开始值 |
推荐您阅读更多有关于“CSS”的文章
- 上一篇:CSS 伪类(Pseudo-classes)
- 下一篇:CSS 图像透明/不透明
- CSS
常用CSS代码大全
用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码我们都铭记于心,最近我把CSS中的常用代码进行了归纳总结,方便自己以后查看,同时也分享给大家,希望对你们有用。...
21416 2020-01-26 - CSS
CSS 实例
CSS 实例CSS背景设置页面的背景颜色设置不同元素的背景颜色设置一个图像作为页面的背景错误的背景图片如何在水平方向重复背景图像如何定位背景图像一个固定的背景图片...
136 2020-01-22 - CSS
CSS 总结
你已经学习了CSS,下一步学习什么呢?CSS 总结本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。...
96 2020-01-22 - CSS
CSS属性
CSS 属性 选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是class和id。注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器...
60 2020-01-22 - CSS
CSS 媒体类型
CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 媒体类型一些 CSS 属性只设计了某些媒体...
78 2020-01-22 - CSS
CSS 图像拼合技术
CSS 图像拼合技术图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。...
122 2020-01-22