CSS交集選擇器

時間 2021-08-15

轉載自：http://blog.csdn.net/lianghe_work/article/details/52816267

問題引入

[html]view plain copy 
    
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <style type="text/css">  
         .red{  
             color: red;  
         }  
     </style>  
 </head>  
 <body>  
     <h2>二級標題</h2>  
     <h2 class="red">二級標題</h2>  
     <h2 class="red">二級標題</h2>  
     <p  class="red">段落</p>  
     <p>段落</p>  
     <p>段落</p>  
 </body>  
 </html>  

運行的結果：

我們發現只要是含有red類的標籤都變紅了

如果我的需求是：只能讓h2且含有red類的標籤變紅，這是就要需要交集選擇器

交集選擇器

[html]view plain copy 
    
 h2.red{  
             color: red;  
         }  

上面就是一個交集選擇器的示例：就是說必須是h2標籤同時擁有.red類纔會被選擇器選中，如下圖所示：

這時你發現第一個「段落」並沒有變紅，原因是他只擁有.red類，但不具備h2標籤

注意：

前面講過：後代選擇器h2 .red之間有空格。

而交集選擇器沒有空格，緊挨着一起