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

 

posted @ 2022-02-28 17:34  沉梦昂志_doc  阅读(448)  评论(0编辑  收藏  举报