CSS选择器-孩⼦孙⼦-兄弟（~+）>  是⼉⼦辈的选择器，只选择⼉⼦辈
先写⼀个最基本的（可以在本地跑⼀下试⼀试）：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h2>div下的article的h2标签-1</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
</article>
</div>
</body>
</html>
View Code
区别于这个：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article>h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h2>div下的article的h2标签-1</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
</article>
</div>
</body>
</html>
View Code ·······················································
~是兄弟选择器，但是只是选择的兄弟的后⾯的兄弟被选择
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h2~h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h2>div下的article的h2标签-1</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
<h2>div下的article的h2标签-4</h2>
</article>
</div>
</body>
</html>
View Code
+是“铁兄弟”选择器，只选择紧挨着他的，如果后⾯第⼀个紧挨着的不是他，那就不选了。参考⼀下两个：第⼀个是没有“铁兄弟”，第⼆个是选择了“铁兄弟”：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h1+h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h1>div下的article的h2标签-1</h1>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
css兄弟选择器<h2>div下的article的h2标签-4</h2>
</article>
</div>
</body>
</html>
View Code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h1+h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h1>div下的article的h2标签-1</h1>
<h2>我是上⾯的铁兄弟！</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
<h2>div下的article的h2标签-4</h2>
</article>
</div>
</body>
</html>
View Code