选择器进阶
1、复合选择器:
1)后代选择器(空格):
选择器1(父) 选择器2(后代) { CSS }
<!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的儿子p设置文字颜色是红色 */
div p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
</html>
2)子代选择器(>):
选择器1(父)>选择器2(子) { CSS }
<!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;
} */
/* 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>
2、并集选择器 ( ,):
选择器1,选择器2 { CSS }
<style>
/* p div span h1 字体颜色为红色 */
p,
div,
span,
h1 {
color: red;
}
</style>
3、交集选择器(紧挨着):
选择器1选择器2 { CSS }
<!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>
p.box {
color: red;
}
</style>
</head>
<body>
<!-- 找到第一个p,带box类的,设置文字颜色是红色 -->
<p class="box">这是p标签:box</p>
<p>ppppppppppp</p>
<div class="box">这是div标签:box</div>
</body>
</html>
4、hover伪类选择器:
选择器:hover { CSS }
选中鼠标悬停在元素上的状态,设置样式。
任何标签都可以添加伪类。
<style>
a:hover {
color: red;
}
</style>
5、Emmet语法:通过简写语法,快速生成代码