一文弄懂CSS` :x-child `和` :x-of-type `选择器
一、 :x-child选择器
重点在于 child 子元素，按照子元素顺序选择。
图片预览
1. :first-child
匹配同时满足以下两个条件的元素标签：
① 是div元素的第一个子元素；
② 该子元素是 p 元素。
div p:first-child
{
background-color:yellow;
}
2. :last-child
匹配同时满足以下两个条件的元素标签：
① 是div元素的最后一个子元素；
② 该子元素是 p 元素。
div p:last-child
{
background-color:yellow;
}
3. :only-child
匹配同时满足以下两个条件的元素标签：
① h2元素只有一个子元素；
② 该子元素是 span 元素。
h2 span:only-child {
background-color: gold;
}
4. :nth-child(n)
匹配同时满足以下两个条件的元素标签：
① 元素标签的class类名为box的第三个子元素；
② 该子元素是 li 元素。
.box li:nth-child(3) {
background-color: red;
}
5. 实例
可自行创建HTML文件，对应学习！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: antiquewhite;
}
/* 不生效，ul第一个子元素是 p不是li */
.box li:first-child {
color: yellow;
}
/* 只选取 ul元素下的第一个子元素是 p 的元素 */
.box p:first-child {
color: red;
}
.box li:last-child {
color: aqua;
}
/* 不生效，理由同上 */
.box p:last-child {
color: aquamarine;
}
/* 只选取 span标签为 h2 标签的唯一子元素 */
h2 span:only-child {
background-color: gold;
}
/* 选取 box下的第 3个子标签 且为 li */
.box li:nth-child(3) {
background-color: red;
}
/* 不生效：选取 box下的第5个子标签 且为 li，但第五个标签为p */
.box li:nth-child(5) {
background-color: yellow;
}
</style>
</head>
<body>
<h2>
<span>第一个 Ul 列表 </span>
</h2>
<ul class="box">
<p>0</p> <!-- 字体变红,有背景色 -->
<li>1</li> <!-- 字体变蓝 -->
<li>2</li>
<li>3-1</li>
<p>3-2</p>
<li>4</li>
<p>5</p>
<li>6</li> <!-- 字体变青色，有背景色 -->
</ul>
<h2>
<span>第二个 Ul 列表 </span>
<p>p元素</p>
</h2>
</body>
</html>
二、:x-of-type选择器
重点在于 type 类型，只在类型一致的子元素中找。
1. :first-of-type
匹配 ul元素的子元素中的第一个 li元素
ul li:first-of-type {
background-color: rosybrown;
}
2. :last-of-type
匹配 ul元素的子元素中的最后一个 li元素
ul li:last-of-type {
background-color: chartreuse;
}
3. :only-of-type
匹配 div元素的唯一子元素是 p元素
div p:only-of-type {
font-size: 24px;
color: darkblue;
}
4. :nth-of-type(n)
匹配 div元素的第二个p子元素
div p:nth-of-type(2) {
font-size: 24px;
color: darkblue;
}
5. 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选取 ul元素下的第一个 li 元素 */
.box li:first-of-type {
background-color: rosybrown;
}
/* 选取 ul元素下的最后一个 li 元素 */
.box li:last-of-type {
background-color: chartreuse;
}
.box p:first-of-type {
background-color: blueviolet;
}
.box p:last-of-type {
background-color: chocolate;
}
/* 选取 p标签是 ulbox下唯一的 p标签 */
.ulbox p:only-of-type {
font-size: 24px;
color: darkblue;
}
/* 样式不生效：ulbox下div标签有两个，所以样式不生效 */
.ulbox div:only-of-type {
font-size: 24px;
color: royalblue;
}
.ulbox div:nth-of-type(2) {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="box">
<p>0</p>
<li>1</li>
<li>2</li>
<li>3-1</li>
<p>3-2</p>
<li>4</li>
<p>5</p>
<li>6</li>
</ul>
<hr>
<ul class="ulbox">
<li>a</li>
<div>11</div>
<li>b</li>
<li>c</li>
<p>dddd</p>
<li>f</li>
<div>22</div>
<li>g</li>
</ul>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步