选择器进阶
复合选择器
后代选择器:空格
- 作用:根据 HTML 标签的嵌套关系,选择父元素后代中满足条件的元素
- 选择器语法:选择器1 选择器2 { css }
- 结果:在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式
- 注意点:
•后代包括:儿子、孙子、重孙子……
•后代选择器中,选择器与选择器之前通过 空格 隔开
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 找到div的儿子p设置文字颜色是红色 */
/* 父选择器 后代选择器 {} */
div p {
color: red;
}
</style>
</head>
<body>
<!-- 后代: 儿子, 孙子, 重孙子..... -->
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body></html>
效果如下:
子代选择器:>
- 作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素
- 选择器语法:选择器1 > 选择器2 { css }
- 结果:在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
- 注意点:
•子代只包括:儿子
•子代选择器中,选择器与选择器之前通过 > 隔开
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 空格隔开的是后代, 儿子,孙子,重孙子 */
/* div a {
color: red;
} */
/* 只想选中儿子a */
/* div的儿子a文字颜色是红色 */
div>a {
color: red;
}
</style>
</head>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body></html>
效果如下:
并集选择器:,
- 作用:同时选择多组标签,设置相同的样式
- 选择器语法:选择器1 ,选择器2 { css }
- 结果:找到 选择器1 和 选择器2 选中的标签,设置样式
- 注意点:
•并集选择器中的每组选择器之间通过 , 分隔
•并集选择器中的每组选择器可以是基础选择器或者复合选择器
•并集选择器中的每组选择器通常一行写一个,提高代码的可读性
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* p div span h1 文字颜色是红色 */
/* 选择器1, 选择器2 {} */
p,
div,
span,
h1 {
color: red;