后代和子代选择器
CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题。
1、后代选择器
比如下面的例子,我们需要将所有的“Hello”选择出来,当然我们可以使用类选择器,但是要是p标签的数量有N个,岂不是要累死人的节奏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div>和平精英</div>
<div>刺激战场</div>
<div>
<p>Hello</p>
</div>
<div>
<p>Hello</p>
</div>
<p>魔兽世界</p>
<p>灌篮高手</p>
</body>
</html>
这里就可以使用到后代选择器,后代选择器又称为包含选择器,用来选择元素或者元素组的后代,写法就是把外层标签写在前面,内层标签写在后面,中间用空格隔开,当标签发生嵌套时,内层标签就成为了外层标签的后代。
比如上面的例子,我们就可以这样写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div p{
color:deeppink;
}
</style>
</head>
<body>
<div>和平精英</div>
<div>刺激战场</div>
<div>
<p>Hello</p>
</div>
<div>
<p>Hello</p>
</div>
<p>魔兽世界</p>
<p>灌篮高手</p>
</body>
</html>
扩展一下,只要中间包含空格的都将称之为后代选择器,那么将后一个“Hello”变成紫色,我们就可以这样写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div p{
color:deeppink;
}
.hello p{
color: purple;
}
</style>
</head>
<body>
<div>和平精英</div>
<div>刺激战场</div>
<div>
<p>Hello</p>
</div>
<div class="hello">
<p>Hello</p>
</div>
<p>魔兽世界</p>
<p>灌篮高手</p>
</body>
</html>
2、子代选择器
跟后代选择器相对的还有子代选择器。
比如下面的例子,我们需要将“一级菜单”变成粉色,要是直接使用上面讲的后代选择器(所有的后代),那么所有的菜单都将变成粉色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
ul li a{
color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>
子代选择器的话我们需要用“>”进行分割,比如上面的例子,第一个“a”(也就是一级菜单),它是“li”的亲儿子,下面的顶多算他的孙子,那么我们要把一级菜单选出来就可以这样写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
ul li > a{
color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>