即指定多個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 來強制應用樣式