CSS选择器精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/xing7290/article/details/106376354

一：前言

今天笔者在看CSS的组合选择符部分，发现后代选择器和子选择器、相邻兄弟选择器和后续兄弟选择器概念有点难理解，笔者就做了一些实验，然后明白了。
运行环境：菜鸟教程的CSS页面（笔者发现这里真的方便，帮你写了主框架，然后，要写什么效果都可以直接跑出来。简单的前端知识学习都可以在这里进行。）

二：操作

1.后代选择器和子选择器：
后代选择器是以空格分割的(例子：A空格B)，获取A标签下所有B标签。
子选择器是是以大于号分割的(例子：A大于号B)，获取A标签下的子标签B。
实验：

后代选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>test 1。 在 div 中。</p>
<p>test 2。 在 div 中。</p>
</div>
<p>test 3。不在 div 中。</p>
<p>test 4。不在 div 中。</p>
</body>
</html>

运行效果：
div1
div里面的p标签都变色了。


```c
子选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>这个p的爸爸是div</p>
</div>
<div>
<span><p>这个p的爸爸是span，爷爷是div</p></span>
</div>
<p>这个p没有爸爸也没有爷爷</p>
</body>
</html>

运行效果：
div2

div里面的子p标签变色了，孙p标签没有变色。

2.相邻兄弟选择器和后续兄弟选择器（后续也称普通，所以也叫普通兄弟选择器）
相邻兄弟选择器是以加号分割的(例子：A加号B)，A标签和B标签有相同父标签，A标签和B标签是紧接的，选取第一个B标签。
后续兄弟选择器是是以破折号(“就是这个~，按下Shift同时按F1左下角的有小波浪的键就可以得到”)分割的(例子：A破折号B)，A标签和B标签有相同父标签，A标签和B标签是紧接的，选取紧接的所有B标签。
实验：

相邻兄弟选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div+p
{
	background-color:#00ff99;
}
</style>
</head>
<body>
<div>
<p>div里面的p（完全没机会）</p>
</div>
<p>与div相邻的第一个p（天选之子）</p>
<p>与div相邻的第二个p（差了一点呀）</p>
</body>
</html>

运行效果：
div3
就一个相邻的p标签被选中

后续兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div~p
{
	background-color:#00ff99;
}
</style>
</head>
<body>
<div>
<p>div里面的p（完全没机会）</p>
<p>div里面的p（完全没机会）</p>
</div>
<p>与div相邻的第一个p（天选之子）</p>
<p>与div相邻的第二个p（天选之子）</p>
<span>
	<p>因为电灯泡span，失去了机会</p>
</span>		
</body>
</html>