CSS伪元素样式 :before 和 :after

最新推荐文章于 2024-07-11 21:11:19 发布

原创最新推荐文章于 2024-07-11 21:11:19 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中常用的选择器伪类和伪元素，包括:first-child、:first-letter、:first-line、:before、:after、:focus、:lang等的用法和实例，帮助开发者更好地进行网页样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性　　　　描述
:first-child　选择器用于选取属于其父元素的首个子元素的指定选择器。
:first-letter　向文本的第一个字母添加特殊样式。　1
:first-line　向文本的首行添加特殊样式。　1
:before　在元素之前添加内容。　2
:after　在元素之后添加内容。　2
:focus　选择器用于选取获得焦点的元素。
:lang　选择器用于选取带有以指定值开头的 lang 属性的元素。
　
以.testdiv类为例：

.testdiv{ height:100px; width:100px; background-color:yellow;}

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

.testdiv:before{height:1px; width:100px; background-color:black;}

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

.testdiv:after{height:1px; width:100px; background-color:black;}

　
“:first-child”选择器用法举例

//选择每个<p> 中的每个<i> 元素并设置其样式，其中的<p>元素是其父元素的第一个子元素：
p:first-child i
{
　　background:yellow;
}

//选择列表中的第一个<li> 元素并设置其样式：
li:first-child
{
　background:yellow;
}

//设置每个<ul> 的首个子元素，并设置其样式：
ul>:first-child
{
　background:yellow;
}

　
“:focus”选择获得焦点的输入字段，并设置其样式。

input:focus
{ 
　background-color:yellow;
}

　
“:lang”选择带有以 “en” 开头的 lang 属性值的每个 < p> 元素，并设置其样式：

//CSS
p:lang(en)
{ 
　background:yellow;
}
//HTML
<p>我是小蛇</p>
<p lang="en">我是好人，哈哈</p>

http://www.runoob.com/cssref/css-selectors.html