html元素中class屬性值多個空格分格是什麼意思？

標籤：

即指定多個class，這是bootstrap常乾的事，比如 <div class="alert alert-info">

請問，這兩個class之間的關係是什麼，二者的優先順序是怎樣的？

我自己定義了一個class ，加在後面，但沒起作用，當然，如果寫到style裡去是可以的。

 

你說的沒錯，就是指定多個class的意思，在HTML的層面上說的話，這樣指定的class是同級的。同級的class需要看CSS檔案的先後次序，後載入的css會覆蓋前面載入的css。寫到style的話因為是最後解析的所以是最高的一個優先順序。

 

前面的答案，都是合理的。但依我看，這麼幹側重在於 CSS 的模組化設計。.alert 是基礎公用層，.alert-info 是個表現擴充層。

像 @Aivier 所說的，它還有可能有 alert-warning，alert-success 等等，假如我們每個分開寫的話，小頁面沒什麼問題，但是它在一個大項目裡，就顯得很笨拙，增加了開發的時間成本。所以，人們為了提高代碼的重用性，把類似的結構或功能等等的組件，劃為一個模組。然後把它們的共性提煉出來，也就是這段代碼前的 .alert，再分開寫它們具體的表現樣式，即.alert-info。

 

多個class你可以理解成一對多的意思，說的是這一塊有多個class樣式。 css的優先順序考慮的地方還算比較多，你這裡使用style毫無疑問是優先順序最高的，任何情況想style的優先順序都是最高的。其次是ID和各種選取器和繼承，其實單獨一個class的優先順序很低的。

 

<div class="alert alert-info">

同時指定了多個CSS樣式，這裡面的alert-info還可以換成alert-warning，alert-success等，這樣分開多個class可以減少重複的代碼，alert中的樣式唯寫一次即可，而不用alert-warning，alert-info中都重複一遍

你自己寫的樣式可以在分號前增加 !important 來強制應用樣式

html元素中class屬性值多個空格分格是什麼意思？