css 屬性書(shū)寫(xiě)順序遵循以下規(guī)則:重要性聲明(覆蓋現(xiàn)有樣式)具體性聲明(針對(duì)特定元素或偽類(lèi))縮寫(xiě)值(多個(gè)屬性值集合)longhand 屬性(展開(kāi)縮寫(xiě)值)值(按 css 規(guī)范中定義的順序)
CSS 屬性書(shū)寫(xiě)順序
CSS 屬性的書(shū)寫(xiě)順序遵循以下規(guī)則:
1. 重要性聲明(可選)
使用 !important
聲明覆蓋現(xiàn)有樣式,將該屬性置于最高優(yōu)先級(jí)。
2. 具體性聲明
針對(duì)特定 HTML 元素(例如 div.class
) 或偽類(lèi)(例如 :hover
) 指定屬性。
特殊性更高的聲明將覆蓋特殊性較低的聲明。
3. 縮寫(xiě)值(可選)
使用單個(gè)屬性值同時(shí)設(shè)置多個(gè)屬性。
縮寫(xiě)值必須按順序指定。
4. Longhand 屬性
展開(kāi)縮寫(xiě)值后,對(duì)應(yīng)的 longhand 屬性將按順序指定。
5. 值
屬性值本身按其在 CSS 規(guī)范中定義的順序書(shū)寫(xiě)。
示例:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">/* 重要性聲明 */ div.important-class { /* 具體性聲明 */ border: 1px solid red !important; /* 重要性聲明覆蓋 */ /* 縮寫(xiě)值 */ background: #ccc padding: 10px; /* 縮寫(xiě)值按順序指定 */ /* Longhand 屬性 */ background-color: #ccc; /* Longhand 屬性按順序指定 */ padding-top: 10px; /* Longhand 屬性按順序指定 */ }</code>
登錄后復(fù)制