css中级选择器
1.1 派生选择器(子类选择器)
a.语法
选择器a 选择器b{
样式名1:样式值1;
样式名2:样式值2;
..........
}
b.不加派生选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/daa1da1c7caa78dadb6a5ea7e36326b5.png#pic_center)
c.加派生选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2891c99dc8d4c63e09baa33dc7ccdc59.png#pic_center)
d.源码
<!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 type="text/css">
div span{
color: orange;
}
</style>
</head>
<body>
<div id="box">
<span>早安</span>
<div>
<span>各位</span>
</div>
</div>
<span>祝你好运</span>
</body>
</html>
2.2 直接子类选择器
a.语法
选择器a > 选择器b{
样式名1:样式值1;
样式名2:样式值2;
..........
}
b.不加直接选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dad8504600a5e9cb110898cd74dce4e4.png#pic_center)
c.加直接选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/84d7fe1ef5625240ed93d213323d2d17.png#pic_center)
d.源码
<!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 type="text/css">
div > span{
color: orangered;
}
</style>
</head>
<body>
<div id="box">
<span>早安</span>
<div>
<p>
<span>各位</span>
</p>
</div>
<p>每个人都是一个潜力股</p>
<span>Good luck</span>
<p>我们的是最棒的</p>
<p>我们的是最牛的</p>
</div>
<span>祝你好运</span>
</body>
</html>
2.3 分组选择器
a.语法
选择器a,选择器b{
样式名1:样式值1;
样式名2:样式值2;
}
b.不加分组选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/18409ee8b955e8a39cbfc6786250f543.png#pic_center)
c.加分组选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3995ae4194bbd94d42f949c6e52bf8c5.png#pic_center)
d.源码
<!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 type="text/css">
span,p{
color: orangered;
}
</style>
</head>
<body>
<div id="box">
<span>早安</span>
<div>
<span>各位</span>
</div>
<span>Good luck</span>
<p>我们的是最棒的</p>
</div>
<span>祝你好运</span>
</body>
</html>
2.4 兄弟选择器
a.语法
选择器a+选择器b{
样式名1:样式值1;
样式名2:样式值2;
}
b.不加兄弟选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f90cbf098d7bad58c6d483b7db766cb0.png#pic_center)
c.加兄弟选择器的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e581cd28b703d3e349b6887675ac01dc.png#pic_center)
d.源码
<!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 type="text/css">
span+p{
color: orangered;
}
</style>
</head>
<body>
<div id="box">
<span>早安</span>
<div>
<span>各位</span>
</div>
<p>每个人都是一个潜力股</p>
<span>Good luck</span>
<p>我们的是最棒的</p>
<p>我们的是最牛的</p>
</div>
<span>祝你好运</span>
</body>
</html>