我什麼時候需要放置div。有兩個CSS選擇器？

Question

我只是想知道什麼時候需要在我的樣式表中使用兩個CSS類時放置div.cssclass。我通常通過使用和不使用故障排除，直到它工作，這顯然是很好，很快，但我會很高興知道最佳做法。

例子：

.cssclass1 .cssclass2 { } 

VS

.cssclass1 div.cssclass2 { } 

難道它不是一個直接的兄弟吧，即嵌套在有隔壁班的時候？

Answer 1

如果這兩個元素是div的，再有就是沒有區別，除了

.cssclass1 .cssclass2 { 

快於

.cssclass1 div.cssclass2 { 

如果你不得不讓我們說：

<div class="cssclass1"> 
    <div class="cssclass2"></div> 
    <a class="cssclass2"></a> 
</div> 

然後.cssclass1 .cssclass2 {會選擇div和a，而.cssclass1 div.cssclass2 {只會選擇div。

Answer 2

不同的是特異性因爲如果你有.cssclass1 .cssclass2，與該班的所有元素都受到影響但如果使用.cssclass1 div.cssclass2，唯一受影響的是<div>元素與cssclass2類。

Answer 3

正如Jonjie所說，它是關於特異性的。這裏有一個例子...

div .cssclass2 { 
    background-color: green; 
} 

.cssclass1 div { 
    background-color: blue; 
} 

div div { 
    background-color: orange; 
} 
<div class="cssclass1"> 
<div class="cssclass2"> 
hello 
</div> 
</div> 

正如你所看到的，沒有一個樣式聲明是我們html的完全匹配。那麼，背景應該是什麼顏色？ CSS有一種方法可以通過識別最特定於html的css來解決這種歧義。有一些關於理解CSS特異性的好博客文章。