CSS優先順序

多重樣式（multiple styles）：如果外部樣式、內部樣式和內聯樣式同時應用於同乙個元素，就是使多重樣式的情況。

一般情況下，優先順序如下：（外部樣式）external style sheet <（內部樣式）internal style sheet <（內聯樣式）inline style

還有一種不常用的css匯入方式:@import url(mycss/haha.css),這種方式是頁面顯示出來之後在載入css,所以頁面一開始沒有css定義顯示比較混亂,過了一會兒才載入css顯示正常,頁面會閃爍一下.

每個選擇器都有乙個優先順序.這個優先順序可以定義為五元組(a,b,c,d,e)

第乙個數字（a）表示style屬性，即內聯樣式。

第二個數字（b）表示id選擇器,b表示id選擇器的個數。

第三個數字（c）表示class選擇器,c表示類及偽類的個數,包括class（.btn）和屬性css選擇器（比如li[id=red]）。

第四個數字（d）表示tag選擇器,d表示元素和偽元素（如first-child）的個數。

第五個數字(e)表示這個句子是整個css系統中的第幾個選擇器.

當判斷乙個選擇器的優先順序時,按照這五元組進行比較,第乙個相同比較第二個,前兩個相同比較第三個...第五個數字肯定不同,於是優先順序就排出來了.其實比較時比較五個數字比較費力,不如直接將他們乘以權值對映為乙個int.瀏覽器實現時到底採用什麼方式並不重要,重要的是明白這個道理.下面給出瀏覽器解析css和渲染元素的偽**.

def initselectors():
for selector in css:
selector.priority=0
#這是第幾個選擇器
selector.priority+=css.indexof(selector)
if selector is important:
selector.priority+=10000
if selector is inline:#內聯樣式至高無上,如果為內聯樣式,其它幾個的值肯定是0
selector.priority+=len(css)**4
else:
for i in selector:
if i is idselector:
selector.priority+=len(css)**3
elif i is classselector:
selector.priority+=len(css)**2
elif i is tagselector:
selector.priority+=len(css)
def renderelements():
for element in html:
attrtable={}
for selector in selectors:
if element is selector:
for attrbute in selector:
if attrtable[attrbute]==null or attrtable[attrbute].priority

通用css選擇器（*）是0優先順序。
如果兩個css選擇器有同樣的優先順序，在樣式表中後面的那個起作用。
css選擇器只有4種:

$('.answer input[value=0]').attr('checked',true)
$(".question_answers").find('input:first').attr('checked',true)
$("button[id^=peer]").click();
$("label:contains('正確'):not(:contains('部分'))").each(function())

CSS優先順序

css 優先順序

css優先順序

css優先順序

CSS優先順序

css 優先順序

css優先順序

css優先順序

相關推薦