CSS三大特性—— 繼承、優(yōu)先級和層疊的介紹

大師兄 · 發(fā)表于 2017-11-21 09:56:24

親注冊登錄道勤網(wǎng)-可以查看更多帖子內容哦�。ò蕡D片、文字詳情等）請您及時注冊登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號？立即注冊

x

css選擇符分類　　

首先來看一下css選擇符(css選擇器)有哪些?

　　1.標簽選擇器(如：body,div,p,ul,li)

　　2.類選擇器(如：class="head",class="head_logo")

　　3.ID選擇器(如：id="name",id="name_txt")

　　4.全局選擇器(如：*號)

　　5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)

　　6.后代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)

　　7.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標簽分組顯示

　　8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)

　　9.偽類選擇器(如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。)

　　10.字符串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)

　　11.子選擇器 (如：div>p ,帶大于號>)

　　12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)

css優(yōu)先級

當兩個規(guī)則都作用到了同一個html元素上時，如果定義的屬性有沖突，那么應該用誰的值的，CSS有一套優(yōu)先級的定義。

不同級別

在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
作為style屬性寫在元素內的樣式
id選擇器
類選擇器
標簽選擇器
通配符選擇器
瀏覽器自定義或繼承

總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性

同一級別

同一級別中后寫的會覆蓋先寫的樣式

上面的級別還是很容易看懂的，但是有時候有些規(guī)則是多個級別的組合，像這樣

<span style="background-color: white;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.test{
background-COLOR:#a00;
width:100px;
height: 100px;
}
.test.test2{
background-COLOR:#0e0;
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div class="test test2"></div>
</body>
</html></span>

復制代碼

到底div是應用那條規(guī)則呢，有個簡單的計算方法（經(jīng)園友提示，權值實際并不是按十進制，用數(shù)字表示只是說明思想，一萬個class也不如一個id權值高）

內聯(lián)樣式表的權值為 1000
ID 選擇器的權值為 100
Class 類選擇器的權值為 10
HTML 標簽選擇器的權值為 1

我們可以把選擇器中規(guī)則對應做加法，比較權值，如果權值相同那就后面的覆蓋前面的了，div.class的權值是1+10=11，而.test1 .test2的權值是10+10=20，所以div會應用.test1 .test2變成綠色

另外一種理解方式：

　　CSS優(yōu)先級：是由四個級別和各級別的出現(xiàn)次數(shù)決定的。

　　四個級別分別為：行內選擇符、ID選擇符、類別選擇符、元素選擇符。

　　優(yōu)先級的算法：

　　每個規(guī)則對應一個初始"四位數(shù)"：0、0、0、0

　　若是行內選擇符，則加1、0、0、0

　　若是 ID選擇符，則加0、1、0、0

　　若是類選擇符/屬性選擇符/偽類選擇符，則分別加0、0、1、0

　　若是元素選擇符/偽元素選擇符，則分別加0、0、0、1

　　算法：將每條規(guī)則中，選擇符對應的數(shù)相加后得到的”四位數(shù)“，從左到右進行比較，大的優(yōu)先級越高�！　�

需注意的：

　　①、!important的優(yōu)先級是最高的，但出現(xiàn)沖突時則需比較”四位數(shù)“;

　�、�、優(yōu)先級相同時，則采用就近原則，選擇最后出現(xiàn)的樣式;

　　③、繼承得來的屬性，其優(yōu)先級最低;

　　!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性

　　*css選擇器使用強烈建議采用低權重原則，利于充分發(fā)揮css的繼承性，復用性，模塊化、組件化。

選擇器的定位原則以前一直認為選擇的定位是從左向右的方向，查看了網(wǎng)上的相關資料之后才發(fā)現(xiàn)原來自己一直都是錯的。鄭重的聲明選擇器的定位是從右往左的方向，這樣的好處是盡早的過濾掉一些無關的樣式規(guī)則和元素。
簡潔、高效的css       所謂高效就是讓瀏覽器查找更少的元素標簽來確定匹配的style元素。
   1.不要再ID選擇器前使用標簽名
      解釋：ID選擇是唯一的，加上標簽名相當于畫蛇添足了，沒必要。
   2.不要在類選擇器前使用標簽名
   解釋：如果沒有相同的名字出現(xiàn)就是沒必要，但是如果存在多個相同名字的類選擇器則有必要添加標簽名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
   3.盡量少使用層級關系；
      #divclass p.colclass{color:red;}改為  .colclass{color:red;}
   4.使用類選擇器代替層級關系（如上）

道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題! 如果您是道勤主機用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機客服！如果您不是我們的客戶也沒問題，點擊頁面最右邊的企業(yè)QQ在線咨詢圖標聯(lián)系我們并購買后，我們?yōu)槟赓M進行無縫搬家服務，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機的服務！