「前端架構師詳解Css09」“類天貓雙十二側邊欄”及

「前端架構師詳解Css09」“類天貓雙十二側邊欄”及css三大特性

情提示：以下代碼是我們邀請的前端架構師基于天貓門戶編寫的css相關代碼，現在免費分享給大家，獲取的方式為：

關注此頭條號“互聯網IT信息”——>私信發送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。

1. 此篇文章講解目錄：

案例和由此案例重點講解的知識點介紹
案例代碼實現
css三大特性知識點詳解

2. 案例和相關知識點介紹

此案例是頁面，效果如下：

此頁面的技術實現解析：

使用標簽選擇器定義通用樣式，通過css層疊性和繼承性來讓通用標簽的樣式被繼承到類選擇器上

此案例中主要用到了，基于此，我們會系統的將如下知識點全部講解：

css三大特性：層疊性、繼承性、優先級

3. 此案例的代碼實現

第一步：使用塊級標簽和無序列表編寫導航側邊欄的html

第二步：通過標簽選擇器定義ul li a的通用樣式

第三步：定義外層div樣式

第四步：通過類選擇器定義無序列表樣式，其中li和a標簽的基本樣式繼承自第二步的標簽選擇器

4. 此案例的知識點詳解

CSS三大特性：

層疊性、繼承性、優先級

1）層疊性：

1. 給一個標簽設置的樣式發生沖突的時候即樣式的覆蓋

2. 瀏覽器的渲染機制是從上到下的，當有沖突的時候就采用最后的那個樣式

例如：

h2.grape {color: purple;}

h2 {color: siver;}

層疊性代碼實例：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<styletype="text/css">

.two{

color: green;

}

.one{

color: red;

font-size: 30px;

}

.tree{

color: yellow;

font-size: 40px;

}

</style>

</head>

<body>

<pclass="one two tree">

一段文字

</p>

</body>

</html>

2）繼承性：繼承就是子標簽繼承了上級標簽的CSS樣式的屬性

1，發生的前提是：標簽之間屬于一種嵌套關系

2，文字顏色可以之間繼承

3，字體大小可以繼承

4，字體可以繼承

5，行高也可以實現繼承

6，與文字有關的屬性都可以，實現繼承

特殊注意：

a標簽超鏈接不能實現字體顏色的繼承，字體大小可以繼承

h1不可以繼承文字的大小，繼承過來還會做一個計算

繼承性代碼實例：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<style>

div{

color: red;

font-size: 30px;

}

</style>

</head>

<body>

<div>

<ahref="">a</a>

</div>

</body>

</html>

3) 優先級

具體解釋如下：

內聯樣式最大，內聯樣式的優先級最高。

ID選擇器的優先級，僅次于內聯樣式。

類選擇器優先級低于ID選擇器

標簽選擇器低于類選擇器。

補充：

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。

所有都相同時，聲明靠后的優先級大。

CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

綜述：

-行內樣式 > 頁內樣式 > 外部引用樣式 > 瀏覽器默認樣式

important > 內聯 > ID > 偽類|類 | 屬性選擇 > 標簽 > 偽對象 > 通配符 > 繼承

css優先級代碼實例：

<!DOCTYPE>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>無標題文檔</title>

<style>

*{ font-size:56px;}

p{ font-size:32px; color:#60C;}

.d{ color:#F0F;}

#hei{ color:#96F;}

</style>

</head>

<body>

<pclass="d"id="hei"style="color:#FF0;">我是段落3</p>

<ahref="#">我是超鏈接</a>

<span>我是備胎標簽</span>

</body>

</html>

大家好接下來我們會邀請前端架構師以連載的方式，并且結合阿里天貓商城的門戶，系統講解Css的專業知識，歡迎大家關注頭條號“互聯網IT信息”。

.CSS層疊性

所謂層疊性是指多種CSS樣式的疊加。

是瀏覽器處理沖突的一個能力，如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉。

比如先給某個標簽指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標簽指定了相同樣式不同值的情況，這就是樣式沖突。

一般情況下，如果出現樣式沖突，則會按照CSS書寫的順序，以最后的樣式為準。

樣式沖突，遵循的原則是就近原則。那個樣式離著結構近，就執行那個樣式。
樣式不沖突，不會層疊

長江后浪推前浪，前浪死在沙灘上。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            color: red;            font-size: 28px;        }        div{            color: blue;            font-weight: bold;        }</style></head><body>    <div>碼海無際</div></body></html>

2.CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用于父元素即可。

簡單的理解就是：子承父業。

恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            color: blue;        }</style></head><body>    <div>        <span>            碼海無際        </span>    </div></body></html>

3.CSS優先級

1.CSS優先級

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。

在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：

繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        span{            color: red;        }        div {            color: blue;        }</style></head><body>    <div>        <span>            碼海無際        </span>    </div></body></html>

行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大于100?？傊麚碛斜壬厦嫣岣叩倪x擇器都大的優先級。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #my-div {            color: blue;        }</style></head><body>    <div id="my-div" style="color: red">        碼海無際    </div></body></html>

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            color: blue;        }        div {            color: red;        }</style></head><body>    <div>        碼海無際    </div></body></html>

CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            color: blue !important;        }        div {            color: red;        }</style></head><body>    <div>        碼海無際    </div></body></html>

2.CSS特殊性

關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準具體規范入如下：

Specificity用一個四位的數字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。

權重是可以疊加的，比如：

div ul  li   ------>      0,0,0,3
.nav ul li   ------>      0,0,1,2
a:hover      -----—>      0,0,1,1
.nav a       ------>      0,0,1,1   
#nav p       ------>      0,1,0,1

注意：

數位之間沒有進制比如說：0,0,0,5 + 0,0,0,5=0,0,0,10 而不是 0,0, 1, 0，所以不會存在10個div能趕上一個類選擇器的情況。
繼承的權重是 0 。

總結優先級：

使用了 !important聲明的規則。
內嵌在 HTML 元素的 style屬性里面的聲明。
使用了 ID 選擇器的規則。
使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。
使用了元素選擇器的規則。
只包含一個通用選擇器的規則。
同一類選擇器則遵循就近原則。

義CSS樣式時，經常出現兩個或更多樣式規則應用在同一元素上的情況。此時CSS就會根據樣式規則的權重，優先顯示權重最高的樣式。CSS優先級指的就是CSS樣式規則的權重。在網頁制作中，CSS為每個基礎選擇器都指定了不同的權重，方便我們添加樣式代碼。為了深入理解CSS優先級，我們通過一段示例代碼進行分析。CSS樣式代碼如下：

p{ color:red;}           /*標簽樣式*/
.blue{ color:green;}     /*class樣式*/
theader{ color:blue;}    /*id樣式*/

CSS樣式代碼對應的HTML結構為：

<p class="blue" id="header">
    幫幫我，我到底顯示什么顏色?
</p>

在上面的示例代碼中，使用不同的選擇器對同一個元素設置文本顏色，這時瀏覽器會根據CSS選擇器的優先級規則解析CSS樣式。為了便于判斷元素的優先級，CSS為每一種基礎選擇器都分配了一個權重，我們可以通過虛擬數值的方式為這些基礎選擇器匹配權重。假設標簽選擇器具有權重為1.類選擇器具有權重則為10，id選擇器具有權重則為l00。這樣id選擇器“#header”就具有最大的優先級，因此文本顯示為藍色。

對于由多個基礎選擇器構成的復合選擇器(并集選擇器除外)，其權重可以理解為這些基礎選擇器權重的疊加。例如，下面的CSS代碼。

p strong{color:black}            /*權重為：1+1*/
strong.blue{color:green;}        /*權重為：1+10*/
.father strong{color:yellow}     /*權重為：10+1*/
p.father strong{color:orange;}   /*權重為：1+10+1*/
p.father .blue{color:gold;}      /*權重為：1+10+10*/
theader strong{color:pink;}      /*權重為：100+1*/
#header strong.blue{color:red;}  /*權重為：100+1+10*/

對應的HTML結構為：

<p class="father" id="header">
    <strong class="blue">文本的顏色</strong>
</p>

這時，CsS代碼中的“#header strong.blue”選擇器的權重最高，文本顏色將顯示為紅色。此外，在考慮權重時，我們還需要注意一些特殊的情況。

(1)繼承樣式的權重為0

在嵌套結構中、h不管父元素樣式的權重多大，被子元素繼承時，它的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。例如，下面的CSS樣式代碼。

strong{color:red;}
#header{color:green;}

CSS樣式代碼對應的HTML結構如下：

<p id="header" class="blue">
  <strong>繼承樣式不如自己定義的權重大</strong>
</p>

在上面的代碼中，雖然“#header”具有權重100，但被標簽繼承時權重為0。而“strong”選擇器的權重雖然僅為1，但它大于繼承樣式的權重，所以頁面中的文本顯示為紅色。

(2)行內樣式優先

應用style屬性的元素，其行內樣式的權重非常高。換算為數值，我們可以理解為遠大于100。因此行內樣式擁有比上面提到的選擇器都高的優先級。

(3)權重相同時，CSS的優先級遵循就近原則

也就是說，靠近元素的樣式具有最大的優先級，或者說按照代碼排列上下順序，排在最下邊的樣式優先級最大。例如，下面為外部定義的CSS示例代碼。

/*CSS文檔,文件名為style_red.css*/
#header{color:red;}                     /*外部樣式*/

對應的HTML結構代碼如下：

<title>CSS優先級</title>
<link rel="stylesheet"href="style_red.css"type="text/css"/> /*引入外部
定義的CSS代碼*/
<style type="text/css">
#header{color:gray;}
</style>
</head>
<body>
/*內嵌式樣式*/
<p id="header">權重相同時，就近優先</p>
</body>

在上面的示例代碼中，第2行代碼通過外鏈式引入CSS樣式，該樣式設置文本樣式顯示為紅色。第3~5行代碼通過內嵌式引入CSS樣式，該樣式設置文本樣式顯示為灰色。

上面的頁面被解析后，段落文本將顯示為灰色，即內嵌式樣式優先。這是因為內嵌樣式比外鏈式樣式更靠近HTML.元素。同樣的道理，如果同時引用兩個外部樣式表，則排在下面的樣式表具有較大的優先級。如果此時將內嵌樣式更改為：

p{color:gray;}                   /*內嵌式樣式*/

此時外鏈式的id選擇器和嵌入式的標簽選擇器權重不同，“#header”的權重更高，文字將顯示為外部樣式定義的紅色。

(4)CSS定義“limportant”命令，會被賦予最大的優先級

當CSS定義了“limportant”命令后，將不再考慮權重和位置關系，使用“limportant”的標簽都具有最大優先級。例如，下面的示例代碼。

#header{color:red!important;}

應用此樣式的段落文本顯示為紅色，因為“limportant”命令的樣式擁有最大的優先級。需要注意的是，“limportant”命令必須位于屬性值和分號之間，否則無效。

復合選擇器的權重為組成它的基礎選擇器權重的疊加，但是這種疊加并不是簡單的數字之和。下面通過一個案例來具體說明，如例1所示。

例1 examplel1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>復合選擇器權重的疊加</title>
<style type="text/css">
.inner{text-decoration:line-through;}/*類選擇器定義刪除線，權重為10*/
div div div div div div div div div div div{text-decoration:underline;}
/*后代選擇器定義下畫線，權重為11個1的疊加*/
 </style>
</head>
<body>
<div>
  <div><div><div><div><div><div><div><div><div>
     <div class="inner">文本的樣式</div>
  </div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>

例1共使用了11對<div>標簽，它們層層嵌套。第15行代碼我們對最里層的<div>定義類名“inner”。第7、8行代碼，使用類選擇器和后代選擇器分別定義最里層div的樣式。此時瀏覽器中文本的樣式到底如何顯示呢?如果僅僅將基礎選擇器的權重相加，后代選擇器(包含11層div)的權重為11，大于類選擇器“.inner”的權重10，文本將添加下畫線。

運行例1，效果如下所示。

在上圖中，文本并沒有像預期的那樣添加下畫線，而顯示了類選擇器“.inner”定義的刪除線?？梢?，無論在外層添加多少個標簽，復合選擇器的權重無論為多少個<div>標簽選擇器的疊加，其權重都不會高于類選擇器。同理，復合選擇器的權重無論為多少個類選擇器和標簽選擇器的疊加，其權重都不會高于i選擇器。

在線咨詢

上一篇：520條長輩生日用祝福語！值得收藏
下一篇：HTML5新年主題模板（附PSD下載）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「前端架構師詳解Css09」“類天貓雙十二側邊欄”及

情提示：以下代碼是我們邀請的前端架構師基于天貓門戶編寫的css相關代碼，現在免費分享給大家，獲取的方式為：

1. 此篇文章講解目錄：

2. 案例和相關知識點介紹

3. 此案例的代碼實現

4. 此案例的知識點詳解

大家好接下來我們會邀請前端架構師以連載的方式，并且結合阿里天貓商城的門戶，系統講解Css的專業知識，歡迎大家關注頭條號“互聯網IT信息”。

.CSS層疊性

2.CSS繼承性

3.CSS優先級

1.CSS優先級

2.CSS特殊性

您的項目需求

情提示：以下代碼是我們邀請的前端架構師基于天貓門戶編寫的css相關代碼，現在免費分享給大家，獲取的方式為：

大家好接下來我們會邀請前端架構師以連載的方式，并且結合阿里天貓商城的門戶，系統講解Css的專業知識，歡迎大家關注頭條號“互聯網IT信息”。