a.css-class和.css-class選擇器有什麼區別 - 如果我所有的酷元素都是a？

Question

我對CSS的簡單行爲感到困惑。

我在DOM中有一些<a class="cool-element"></a>元素，dom中沒有其他類型的元素具有``cool-element「類，甚至沒有div。所以我這樣做，試圖選擇他們：

.cool-element { 
    background-color: red; 
} 

這讓我吃驚的是沒有工作。但如果我做

a.cool-element { 
    background-color: red; 
} 

我得到預期的結果。我在Firefox以及加載了很多其他CSS規則的應用程序中測試了這一點。我沒有單獨測試過這個，但我確信在其他一些地方我正在使用第一個選擇器，並且成功。這裏的第一個選擇器是不是應該始終工作得很好，還是我錯過了什麼？

Answer 1

CSS特異性

在CSS更具體的規則優先於不太具體的規則。內聯樣式總是優先

+100一個ID - - 您可以使用以下

1. +1000爲內嵌樣式計算給定選擇的特異性的元素
2. +10的id屬性爲類或僞類 - 類屬性或：懸停
3. +1一個元素或僞元素 - HTML，身體，DIV，p ...或：第一，：最後

一個選擇覆蓋所有選擇器比它少點。如果他們有相同數量的點數，那麼順序很重要。

例子

a.class-name = 1 + 10 = 11 
a#id.class-name = 1 + 100 + 10 = 111 
a.class-name.class2-name = 1 + 10 + 10 = 21 

直到我學會了點計算CSS是我心中的黑暗藝術。有上css-tricks好文章可能做解釋它的一個更好的工作 - 跳到計算CSS特異性價值部分

訂購事宜

正如喬治·阿爾瓦拉多提及順序的問題，所以如果你有兩個規則適用於相同元素的第二個樣式將覆蓋第一個樣式。

a.class-name { background: red } #this rule will be overridden 
a.class-name { background: green } #this rule will be applied 

Answer 2

我覺得有時問題並不在CSS中的類的選擇，但爲了你把他們的，所以如果你有這樣的類，然後再另一個規則重寫或者改變它們，你將永遠看不到預期結果。嘗試組織規則應用的方式並再次進行比較。

讓我們假設這樣的：

<div class="topclass"> 
    <a class="myclass1" href="#">a link</a> 
</div> 

a.myclass1{ 
    background-color:red; 
} 

a{ 
    background-color:blue; 
} 

.topclass a{ 
    background-color:yellow; 
} 

最終呈現的顏色是黃色爲你的錨。