在CSS編碼過程中,我們可能會用到多個CSS文件。如果這些文件中有相同的元素或類的樣式設(shè)置,優(yōu)先級就是個問題。下面讓我們來看一看在兩個CSS文件中,優(yōu)先級是如何被設(shè)置的。
// style1.css p { color: red; }
// style2.css p { color: blue; font-size: 14px; }
如上代碼所示,我們在兩個CSS文件中都設(shè)置了p標簽的樣式。那么我們在HTML文件中引用這兩個CSS文件時,該如何設(shè)置優(yōu)先級呢?
針對這種情況,CSS為每個屬性設(shè)置了優(yōu)先級規(guī)則,即:
- 標有!important的屬性擁有最高優(yōu)先級
- 內(nèi)嵌樣式表style的樣式優(yōu)先級高于外部樣式表的樣式
- 類選擇器優(yōu)先級高于元素選擇器
- ID選擇器優(yōu)先級高于類選擇器
- 對于同等選擇器,最后一個擁有優(yōu)先級
在我們的例子中,兩個CSS文件中p標簽的選擇器相同,因此我們需要根據(jù)其他屬性來確定優(yōu)先級。其中,style2.css中color屬性后面還有font-size屬性,因此它的優(yōu)先級要高于style1.css。這就意味著它將覆蓋style1.css中的顏色設(shè)置。
總之,無論您用幾個CSS文件,只要知道CSS優(yōu)先級的規(guī)則,就可以設(shè)置出所需的樣式。