<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ol li{
color: green;
}
</style> <!--所有子类元素生效 不包括自己-->
</head>
<body>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
5
</ol>
</body>
</html>
后代选择器：E F{}所有子类元素样式会发生改变，不管其路径隐藏多深
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p{
color: yellowgreen;
}
</style> <!--直接子类元素生效 不包括自己-->
</head>
<body>
<div>
<p>你好哈哈哈</p>
<ul>
<li>
<p>我好吗？！！！</p>
2
</li>
</ul>
</div>
</body>
</html>
子代选择器：E>F{}直接子元素生效，即你好哈哈哈生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1+p{
color: aqua;
}
</style> <!--相邻兄弟元素生效 不包括自己-->
</head>
<body>
<h1>你现在好吗</h1>
<p>现在感觉良好？！！！</p>
<p>那就好？？？？</p>
</body>
</html>
相邻兄弟选择器：E+F{}，紧跟选择相邻的第一个兄弟元素，即第一个p标签样式改变、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3~p{
color: blueviolet;
}
</style> <!--h3 （ 不算数量 ）之后的所有兄弟元素生效-->
</head>
<body>
<h3>明天你好吗</h3>
<p>明天应该好？？？</p>
<p>oK 我现在又不好了</p>
<p>啊啊啊啊啊发癫了要</p>
<h2>111</h2>
<p>777</p>
</body>
</html>
通用兄弟选择器：E~F{}选择紧跟之后的所有兄弟元素，即“777”样式会随之改变
标签：关系,777,color,元素,样式,Document,选择器,CSS From： https://www.cnblogs.com/songs7/p/17740482.html