css 關於同一個類里多個類名的優先順序？

如：&

按道理來說text-left的設置會覆蓋掉carousel-indicators關於text-align的設置
但是問題是text-left被它覆蓋了……我想知道這是怎麼一回事，謝謝



PS：這是bootstrap框架的css

---

瀉肚……

不是寫在 class 屬性里先後順序……

是 carousel-indicators 和 text-left 定義時先後順序

CSS 文件

或 style 標籤里

.carousel-indicators {

...

}

.text-left {

...

}

這樣，後定義的 .text-left 才會覆蓋同權重樣式

---

CSS選擇器權重的問題，其實只要把權重搞清楚了，這個也就不能理解了。造成這樣的誤會，我來臆斷一下題主的思路。

在一些書本中有說過，選擇器是從右向左渲染

但這句話我想有不少同學理解錯了，因為樣式的權重跟類名寫在左或右都是一樣的。假設這樣的一個示例：

&text1& &text2& &text3& &text4&

在沒有給選擇器定義樣式之前，他們根本沒有權重一說。那麼現在我們來看定義後的樣式：

.a {
color: red;
}
.b {
color: green;
}
.a.b {
color: blue;
}
.b.a{
color: orange;
}


這個時候他們依次對應的顏色是什麼呢？一眼就能說出答案：

text1 ===&> red
text2 ===&> green
text3 ===&> orange
text4 ===&> orange


上面是現代瀏覽器的渲染效果，但回來看看IE6，就能很好說明你所說的從右到左的渲染

text1 =====&>orange
text2 =====&>blue
text3 =====&>orange
text4 ======&>orange


當然這樣的解釋也有點牽強，只是想通過個這樣的一個示例來說明，選擇器的權重跟你的類名在html中寫在前還是寫在後沒有半毛錢關係，有關係的還是你CSS中寫的權重等。

腦補一下：

最後在科普一下：1、你應該知道的一些事情——CSS權重

2、Web前端開發測試題

3、 Specifics on CSS Specificity

4、 Assigning property values, Cascading, and Inheritance

5、 Specificity Calculator

6、Specificity - CSS

7、 http://cssspecificity.com/

8、 What the Heck Is CSS Specificity?

9、 http://www.standardista.com/css3/css-specificity/

10、

---

CSS是按照權重和聲明順序來確定樣式優先順序（衝突時顯示哪個樣式）的。

選擇器特殊性/優先順序

一個元素可能會被多個規則來選擇，如何判斷哪個規則更勝出，這就需要用到選擇器特殊性。選擇器特殊性也稱為選擇器優先順序、選擇器權重。

選擇器的特殊性分成4個成分等級：a、b、c和d

• 如果樣式是行內樣式，那麼a = 1
• b: ID選擇器的總數
• c: 類、偽類和屬性選擇器的數量
• d: 元素選擇器和偽元素選擇器的數量
• 將a,b,c,d組成的一串數字進行比較，例如：1-0-0-0優先於0-2-0-7

與四位數比較大小從左到右順序相同，但不同的是優先順序沒有進位，只能同級之間比較 0-0-1-0 比 0-0-0-13 優先順序更高，0-0-1-0比0-0-0-1000都高。

注意

• 優先順序比較不是十進位數字比較！
• 內聯樣式優先順序最高
• 通用選擇器特殊性為0，計算特殊性時可忽略
• 如果兩個規則的特殊性相同，那麼後定義的規則優先
• !important用於聲明重要聲明，與非重要聲明衝突時總是勝出
• id選擇器優於class選擇器

以上內容來源：

[碼蜂社系列教程：CSS語法](http://fe-base.books.mafengshe.com/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/CSS/%E8%AF%AD%E6%B3%95.html)

---

當時大學時候在公司實習的時候，同事給我看過這麼一副圖片，印象很深...

---

樓主，CSS文件里的先後順序才是載入順序。這樣簡單的問題，樓主稍微變通一下就應該想到的。

---

在css里，同權重的樣式，寫在後面的會覆蓋寫在前面的樣式！

---

推薦閱讀：