大家好，这里是X，今天带来CSS选择器中4个比较容易弄混的选择器概念，下面是解释和代码示例🐵说句实话，有时候玩CSS选择器真的很容易混乱，所以特意写下此文，与大家共勉🐳🐳🐳
在学习这几个选择器的路上，大家光是听名字也可以听出来，这里存在着父类、子类、兄弟的概念，所以在理解上一定要有“先后顺序”的概念，就比如下面的这段代码是我后面即将测试的用例基础码，分析一下它的层次顺序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器问题</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ol>
<li>
<p>p5</p>
</li>
</ol>
<p>p6</p>
<p>p7</p>
</body>
</html>
顺序：
层层分级，以此作为父类、子类、兄弟的概念区分，在这里body是父亲，p是子元素、ul里的p也算是子元素，但是要看具体情况，分析清楚它的父亲是谁，如果对于body来说，p5就像第三代，如果对于ul来说，就像第二代等…那么就让我们开始吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器问题</title>
<style type="text/css">
/* 后代选择器 */
/* 父类里所有的p标签都改变 语法：父类标签+空格+标签名 */
body p{
background-color: #0000CC;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ol>
<li>
<p>p5</p>
</li>
</ol>
<p>p6</p>
<p>p7</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器问题</title>
<style type="text/css">
/* 子选择器 */
/* 是父类的第一任儿子 */
body>p{
background-color: #0000FF;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ol>
<li>
<p>p5</p>
</li>
</ol>
<p>p6</p>
<p>p7</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器问题</title>
<style type="text/css">
/* 相邻兄弟选择器 */
/* 会发现只有class="activate"的那个标签的兄弟背景颜色改变了
并且可以发现，只有下一个兄弟改变了，上面的兄弟颜色没有改变---->向下原则，
只选一个！
*/
.activate + p{
background-color: #0022FF;
}
</style>
</head>
<body>
<p>p1</p>
<p class="activate">p2</p>
<p>p3</p>
<p>p4</p>
<ol>
<li>
<p>p5</p>
</li>
</ol>
<p>p6</p>
<p>p7</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器问题</title>
<style type="text/css">
/* 通用选择器 */
/* 会激活 class="activate"下面的所有兄弟元素！
.activate~p就是激活它下面所有的p标签兄弟
*/
.activate~p{
background-color: #003399;
}
</style>
</head>
<body>
<p>p1</p>
<p class="activate">p2</p>
<p>p3</p>
<p>p4</p>
<ol>
<li>
<p>p5</p>
</li>
</ol>
<p>p6</p>
<p>p7</p>
</body>
</html>
好啦，今天就到这啦，喜欢的话不妨点个赞再走吧~下期见
