CSS(層疊樣式表)是網頁設計中必不可少的一部分,他定義了網頁外觀和結構。在編寫 CSS 樣式時,我們需要注意到其優先級規則,當出現多個樣式時,會按照優先級的高低進行覆蓋。
選擇器類型 優先級 --------------------------------- !important ∞ 內聯樣式(style="") 1000 ID選擇器 (#id) 100 類選擇器、偽類選擇器、屬性選擇器(.class :hover [title=example]) 10 元素選擇器 (div、p、span) 1 通配符 (*) 0 繼承樣式 無優先級
在 CSS 中,使用“!”符號可以使樣式的優先級成為“無窮大”,這種情況下該樣式將優先于其他所有樣式。
與 JavaScript 中的封裝函數類似,在 CSS 中也有“嵌套樣式”的概念。嵌套樣式可以增加選擇器的優先級,例如假如樣式為:
.title { color: red; font-size: 16px; }
當我們在父元素內嵌套一個 class 選擇器 .box,樣式為:
.box .title { color: blue; }
則 .title 的優先級為 10, .box .title 的優先級為 110,所以最終的顏色為 blue。
對于偽元素選擇器(::before, ::after)和偽類選擇器(:nth-child(2), :hover), 因為雖然它們可以被嵌套,但是它們所影響的始終是父元素,因此仍然算在類選擇器、偽類選擇器、屬性選擇器這一類中,優先級為 10。
總的來說,了解 CSS 樣式的優先級規則可以讓我們在樣式選擇上更加靈活。在實際應用中,我們需要根據具體的需求和樣式適用的位置來選擇呈現優先級的方式,從而達到想要的頁面效果。
上一篇css樣式的先后順序
下一篇mysql怎么改數據庫