CSS屬性簡(jiǎn)寫(xiě)和選擇器的優(yōu)先級(jí)是怎樣的

今天就跟大家聊聊有關(guān)CSS屬性簡(jiǎn)寫(xiě)和選擇器的優(yōu)先級(jí)是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是一家專業(yè)從事網(wǎng)站制作、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！

幾個(gè)常用 CSS 屬性的簡(jiǎn)短寫(xiě)法

精簡(jiǎn) CSS 代碼有很多種方法，但其中最常用的方法可能就是使用屬性的簡(jiǎn)短形式。

具有簡(jiǎn)短寫(xiě)法的 CSS 屬性很多，但是常用的屬性無(wú)外乎字體、列表、背景、邊框、透明等幾種，所以在此對(duì)這幾種屬性的簡(jiǎn)短寫(xiě)法做個(gè)歸納，備忘。
font 屬性

font 屬性涉及到字體、字號(hào)、行高等好幾個(gè)屬性，使用簡(jiǎn)短寫(xiě)法的時(shí)候可以節(jié)省好多代碼量。雖然并非所有屬性都要定義，但是一般來(lái)說(shuō) font-size 和 font-family 是必不可少的，以下是 font 的幾個(gè)屬性與其對(duì)應(yīng)的默認(rèn)值：

/* font 各屬性與默認(rèn)值 */
font-variant: normal;
line-height: normal;
font-family: varies;
font-weight: normal;
font-style: normal;
font-size: medium;

以上 6 個(gè)屬性可以合并成一行，根據(jù) W3C 規(guī)范，各屬性前后排列順序依次為：

/* 字體各屬性前后順序 */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

再看以下幾個(gè)示例：

font: 14px Georgia, serif;

font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;

可以看到，一行代碼就可以代替一段代碼，而且看起來(lái)還更優(yōu)雅一些，就是單獨(dú)查找某個(gè)屬性的時(shí)候有點(diǎn)不太方便，看著眼花。
list 屬性

list 有三個(gè)屬性，這三個(gè)屬性分別定義：type、image 和 position，它們的屬性名和默認(rèn)值分別如下：

list-style-type: disc;
list-style-image: none;
list-style-position: outside;

list 只有三個(gè)屬性，并不復(fù)雜，但是我們?nèi)匀豢梢詫⑦@三個(gè)屬性合并為在一行中，根據(jù) W3C 規(guī)范，寫(xiě)法如下：

/* list 屬性簡(jiǎn)短寫(xiě)法 */
list-style: [list-style-type] [list-style-position] [list-style-image];
/* 示例 */
list-style: none;
list-style: disc;
list-style: disc outside;
list-style: disc outside url(bg.png);

一如既往的簡(jiǎn)單，基本上就是簡(jiǎn)寫(xiě)了 list 屬性的名稱，然后按順序排列一下屬性的值即可。
background 屬性

很多樣式表中都會(huì)多次定義 background 屬性，每次都要重復(fù)其 5 個(gè)屬性的話，那代碼量可會(huì)成倍的增加呢。下面是其 5 個(gè)屬性名及其默認(rèn)值：

/* background 的各屬性及其默認(rèn)值 */
background-attachment: scroll;
background-color: transparent;
background-position: top left;
background-repeat: repeat;
background-image: none;

根據(jù) W3C 規(guī)范，將其 5 個(gè)屬性合并起來(lái)的寫(xiě)法如下：

/* background 屬性簡(jiǎn)短寫(xiě)法 */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
/* 示例 */
background: #777;
background: url(images/bg.png) 0 0;
background: #777 url(images/bg.png) repeat-x 0 0;
background: #777 url(images/bg.png) repeat-x fixed 0 0;

對(duì)于 background 簡(jiǎn)短寫(xiě)法而言，不同的標(biāo)簽的使用方法和效果都有一些細(xì)微差別，欲知詳情者，請(qǐng)至官方文檔查看。
border 屬性

border 屬性更為簡(jiǎn)單，它 3 個(gè)屬性以及默認(rèn)值如下：

/* border 各屬性及其默認(rèn)值 */
border-width: none;
border-style: none;
border-color: none;

根據(jù) W3C 規(guī)范，其簡(jiǎn)短寫(xiě)法如下：

/* border 屬性簡(jiǎn)短寫(xiě)法 */
border: [border-width] [border-style] [border-color];
/* 示例 */
border: 1px solid #111;
border: 2px dotted #222;
border: 3px dashed #333;

當(dāng)然也可以為 4 個(gè)邊框定義不同的樣式：

border-bottom: 1px solid #777;
border-right: 2px solid #111;
border-left: 2px solid #111;
border-top: 1px solid #777;

CSS 選擇器的優(yōu)先級(jí)問(wèn)題

CSS 意為層疊樣式表。所謂層疊，就是說(shuō)，可以用多個(gè) CSS 聲明來(lái)作用于同一元素，例如用一段 CSS 來(lái)定義文字的顏色，用另外一段 CSS 來(lái)定義文字的大小，最終達(dá)到樣式疊加的效果。

這種特性一定程度上使 CSS 可以更為方便的定義樣式，但同時(shí)也帶來(lái)了一定的復(fù)雜性。例如，當(dāng)多個(gè)樣式作用于同一個(gè)元素，而且還是作用于同一個(gè)屬性，元素最終會(huì)以何種方式來(lái)呈現(xiàn)樣式呢？

參考下面這個(gè)例子：

p {
color: black;
background-color: white;
}
div.warning p {
color: red;
}
div#caution p {
color: yellow;
}
body#home div p {
color: white;
}

此樣式表中有 4 組選擇器，且最終都指向 p 元素，并且每組樣式中都有 color 屬性。這樣一來(lái)，可能的情況就是會(huì)有多個(gè)顏色屬性，被施加于同一個(gè) p 元素。問(wèn)題來(lái)了，瀏覽器最終會(huì)以什么樣的方式來(lái)渲染 p 的顏色呢？后定義的顏色會(huì)覆蓋掉先定義的顏色嗎？

這里就涉及到一個(gè) CSS 選擇器優(yōu)先級(jí)的問(wèn)題，如果有多個(gè)選擇器作用于某元素的同一個(gè)屬性，那么瀏覽器會(huì)去計(jì)算其對(duì)應(yīng)選擇器的優(yōu)先級(jí)，并最終將優(yōu)先級(jí)最高的那個(gè)選擇器的樣式作用于元素。
如何計(jì)算優(yōu)先級(jí)呢？

優(yōu)先級(jí)的計(jì)算通常遵循如下規(guī)則：

    如果某元素被設(shè)置了 style 屬性，也就是說(shuō)被設(shè)置了行內(nèi)樣式，那么此行內(nèi)樣式將擁有最高的優(yōu)先級(jí)，任何其它外部樣式都不能將其覆蓋。如果沒(méi)有被設(shè)置行內(nèi)樣式，那么參照下面的第 2 條規(guī)則。
    數(shù)一下選擇器中 ID 選擇器的個(gè)數(shù)，個(gè)數(shù)最多的，優(yōu)先級(jí)就最高。如果 ID 選擇器個(gè)數(shù)相同，或者壓根兒就沒(méi)有 ID 選擇器，那么參照下面的第 3 條規(guī)則。
    數(shù)一下類選擇器（如 .test）的個(gè)數(shù)，屬性選擇器（如 [type="submit"]）的個(gè)數(shù)，還有偽類選擇器（如 :hover）的個(gè)數(shù)，然后將個(gè)數(shù)加起來(lái)，總數(shù)最多的，這組選擇器的優(yōu)先級(jí)就最高。如果總是一樣多，或者都為 0，那么參照下面的第 4 條規(guī)則。
    數(shù)一下標(biāo)簽選擇器（如 p）的個(gè)數(shù)，另外還有偽元素選擇器（如 :first-letter）的個(gè)數(shù)，加起來(lái)，總數(shù)最多的，優(yōu)先級(jí)就最高。

如果經(jīng)過(guò)上面的計(jì)算，優(yōu)先級(jí)還是一樣高，那么遵循后出現(xiàn)的樣式覆蓋先出現(xiàn)的樣式之規(guī)則。

現(xiàn)在回過(guò)頭來(lái)看先前的例子，那四組選擇器的優(yōu)先級(jí)分別為 0001、0012、0102、0103，之所以把優(yōu)先級(jí)數(shù)字化，是因?yàn)檫@樣更方便比較。按照自然數(shù)法則（事實(shí)上它們并非自然數(shù)）來(lái)比較，1 < 12 < 102 < 103，這樣一來(lái)，它們的優(yōu)先級(jí)孰高孰低，就一目了然了。

看完上述內(nèi)容，你們對(duì)CSS屬性簡(jiǎn)寫(xiě)和選擇器的優(yōu)先級(jí)是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前文章：CSS屬性簡(jiǎn)寫(xiě)和選擇器的優(yōu)先級(jí)是怎樣的
標(biāo)題網(wǎng)址：http://muchs.cn/article2/igshic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、云服務(wù)器、網(wǎng)站營(yíng)銷、手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容