CSS 中通用選擇器和降序選擇器的區別

Question

我想知道是否有人可以告訴我何時使用通用選擇器以及何時使用 css 中的后代選擇器？ 我四處尋找一個很好的解釋，但沒有找到一個很好的答案來解釋它們之間的區別以及何時使用一個或另一個：

div * .test{
   color: red;
}

div .test{
   color: red;
}

更新涵蓋所有場景：

div * .test{
   color: red;
}

div *.test{
   color: red;
}

div .test{
   color: red;
}

Answer 1

一般規則是非常稀疏地使用通用選擇器，因為它對性能有不良影響。 你基本上幾乎從不使用它。

后代選擇器，顧名思義，目標是后代選擇器之前元素的后代。

請注意，您顯示的兩個選擇器並不完全相同。

從右到左閱讀選擇器很有幫助：

div * .test目標

• 具有 css 類test ( .test ) 的項目
• 哪些是后代
• 任何元素*
• 這是一個后代
• div元素。

看這個例子：

 div * .test{ color: red; }

 <div> <div class="test">test</div> </div>

現在與您的第二個選擇器進行比較：

 div .test{ color: red; }

 <div> <div class="test">test</div> </div>

編輯：您現在已經擴大了您的問題。

*.test和.test目標完全相同的元素，在這里明確使用通用選擇器沒有任何好處，我認為這是不好的編碼實踐。 隱式地，它已經是任何沒有元素選擇器的選擇器部分的一部分：

#foo等同於*#foo
[foo]等同於*[foo]

Answer 2

首先，請注意 CSS 中的 Child 組合符 ( > ) 表示直接的子關系。 而后代組合子 ( ) 將適用於直接和間接子女。

考慮到這一點。 selectos div * .test將采用類test的元素，這些元素是div元素子元素的子元素。 而且，由於我們使用的是后代組合器，因此它們可以是間接子代。

但是， div .test將采用類test元素，這些元素是div孩子。

因此， div .test將選擇span在<div><span class="test">test</span></div> 然而， div * .test不會，因為在div和span之間沒有另一個元素。

它們都將選擇span中<div><p><span class="test">test</span></div> 在這種情況下*匹配p元素。 然而，沒有必要匹配它，因為我們使用的是后代組合器。 在這種情況下，使用*會給瀏覽器帶來額外的工作。

請注意， div *和div沒有選擇相同的元素。 該div *選擇的所有子div 。 而div選擇所有div 。

---

順便說一句，作為一般規則，選擇器越簡單，瀏覽器就越容易檢查它。 瀏覽器的通常實現向后檢查這些選擇器（從匹配最右邊的部分開始）。 這意味着對於div * ，瀏覽器必須檢查頁面上的每個元素以查看它是否在div 。 因此，選擇器越短越具體越好。

例如，如果您只想要類test是div直接子級的元素，請使用div > .test 。 這樣，瀏覽器就不會爬 DOM 尋找是否有包含該元素的div 。

而且，當然，如果您可以使用.test ，那就更好了。

---

*.test將采用類test所有元素，這與.test相同。

---

根據測試您的選擇，使用像border: 1px solid black類的東西。 這將允許您區分何時選擇元素和何時選擇其父元素。

Answer 3

主要有 3 種類型的選擇器 wrt 你在問什么。

1. Universal : div *: 將 CSS 應用於 div 內的所有元素。
2. 直接子項： div > .test ：將 CSS 應用於 div 內的所有直接子項，即 child1 和 child2。
3. 所有子項： div .test: 將 CSS 應用於 div 中滿足條件的所有子項。 即測試。

 /* apply to every element */ * { padding: 4px; } div.parent { width: 100px; height: 100px; border: 2px solid green; background-color: lightblue; } /* apply to every element inside parent*/ .parnet * { border: 2px solid black; } /* apply to all immediate children element with class 'child1' inside parent*/ .parnet > .child1 { border: 2px solid red; background-color: lightgreen; } /* apply to all children element with class 'test' inside parent*/ .parnet .test { border: 2px solid blue; background-color: lightpink; }

 <div class="parnet"> Parent <div class="child child1"> child 1 <div class="test">test 1</div> </div> <div class="child child2"> child 2 <div class="test">test 2</div> </div> </div>