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标签-1h2>
<div>
<h2>div下的article下的div下的h2标签-2h2>
div>
<h2>div下的article的h2标签-3h2>
article>
div>
body>
html>
区别于这个：
DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试网页title>
<style>
div article>h2{
color:blue;
}
style>
head>
<body>
<div>
<article>
<h2>div下的article的h2标签-1h2>
<div>
<h2>div下的article下的div下的h2标签-2h2>
div>
<h2>div下的article的h2标签-3h2>
article>
div>
body>
html>
·······················································
~是兄弟选择器，但是只是选择的兄弟 的后面的兄弟被选择
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标签-1h2>
<div>
<h2>div下的article下的div下的h2标签-2h2>
div>
<h2>div下的article的h2标签-3h2>
<h2>div下的article的h2标签-4h2>
article>
div>
body>
html>
+是“铁兄弟”选择器，只选择紧挨着他的，如果后面第一个紧挨着的不是他，那就不选了。
参考一下两个：第一个是没有“铁兄弟”，第二个是选择了“铁兄弟”：
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标签-1h1>
<div>
<h2>div下的article下的div下的h2标签-2h2>
div>
<h2>div下的article的h2标签-3h2>
<h2>div下的article的h2标签-4h2>
article>
div>
body>
html>
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标签-1h1>
<h2>我是上面的铁兄弟！h2>
<div>
<h2>div下的article下的div下的h2标签-2h2>
div>
<h2>div下的article的h2标签-3h2>
<h2>div下的article的h2标签-4h2>
article>
div>
body>
html>