- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-21 17:13:03
:first-child 选择器
定义和用法
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 选择器 |  |  |  |  |  |
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>
选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:first-child{
color:#8A2BE2;
background-color: #AFD9EE;
}
</style>
</head>
<body>
<p>这个段落是其父元素（body）的首个子元素。</p>
<h1>Hello World!</h1>
<p>这个段落不是其父元素（body）的首个子元素。</p>
<div>
<p>这个段落是其父元素（div）的首个子元素。</p>
<p>这个段落不是其父元素（div）的首个子元素。</p>
</div>
<p>这个段落不是其父元素（body）的首个子元素。</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:first-child i{
color:#8A2BE2;
background-color: #AFD9EE;
}
</style>
</head>
<body>
<p>测试文本<i>（父元素body）</i></p>
<p>测试文本<i>（父元素body）</i></p>
<div>
<p>测试文本<i>（父元素div）</i></p>
<p>测试文本<i>（父元素div）</i></p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
选择列表中的第一个 <li> 元素并设置其样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li:first-child{
color:#8A2BE2;
background-color: #AFD9EE;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
设置每个 <ul> 的首个子元素，并设置其样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
ul>:first-child{
color:#8A2BE2;
background-color: #AFD9EE;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
推荐手册