1.选择器进阶
1.1后代选择器 :空格
根据HTML标签的嵌套关系,选择父元素 后代中 满足条件的元素
选择器语法:选择器1 选择器2 {CSS}
在选择器1所找到的标签的后代(儿子、孙子、重孙子......)中,找到满足选择器2的标签,设置样式。需要注意的是:选择器之间需要空格隔开
<!DOCTYPE html>
<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>选择器-后代</title>
<style>
/* 找到div的儿子p设置成文字颜色为红色 */
/* 父选择器 后代选择器 {} */
div p {
color: red;
}
</style>
</head>
<body>
<!-- 后代:儿子、孙子、重孙子....... -->
<p>P标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
</html>
1.2 子代选择器:>
根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素。
选择器语法:选择器1 > 选择器2 { css }
在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式。子代只包括儿子。
<!DOCTYPE html>
<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>