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>
           <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>