CSS權威指南讀書筆記-結(jié)構和層疊

選擇器的特殊性:特殊性的值表示為四個部分 ,比如 0 0 0 0


對于選擇器中給定的各個ID屬性值,加0 1 0 0?

對于選擇器中給定的各個類屬性值,屬性選擇或偽類加 0 0 1 0

對于選擇器中給定的各個元素和偽元素,加- 0 0 0 1 偽元素有特殊性,其特殊性為0 0 0 1

結(jié)合符合通配選擇器對特殊性沒有任何貢獻

內(nèi)聯(lián)樣式的特殊性為 1 0 0 0?


特殊性自左到右逐個比較 1 0 0 0 大于 0 * * * ?0 0 1 0 大于 ?0 0 0 13

重要聲明

在屬性值結(jié)束分號前!important 標志 ,該標志必須放在聲明的最后,每個聲明都需要加!important才能生效

特殊性:重要聲明分為一組,非重要聲明為一組,重要聲明的特殊性總大于非重要聲明,每組元素的特殊性內(nèi)部分別計算。

繼承

繼承無特殊性,比0特殊性還弱

層疊

創(chuàng)作人員樣式勝過讀者樣式,有!important樣式讀者樣式要強于其他所有樣式,包括有!important樣式的創(chuàng)作者樣式,創(chuàng)作人員樣式和讀者樣式都比用戶代理的默認樣式強。

按特殊性排序,較高特殊性的元素權重大于較低特殊性的元素

按出現(xiàn)順序排序,一個聲明在樣式表中出現(xiàn)的順序越靠后,權重越大。一般認為導入樣式表中的聲明在前,主樣式表中的所有聲明在后。

!important 強于內(nèi)聯(lián)樣式

權重的大小順序為

1、讀者的重要聲明

2、創(chuàng)作人員的重要聲明

3、創(chuàng)作人員的正常聲明

4、讀者的正常聲明

5、用戶代理聲明

link-visited-hover-active順序的原因

根據(jù)越往后的權重越大原則,actice最先,之后是hover 再是visited ?再是link

如果寫作:

:active{ }

:hover{}

:link{}

:visited{}

因為一個元素要么是訪問過的要么是未訪問的,總會覆蓋hover,

根據(jù)這一規(guī)則,想要讓未訪問的有懸停樣式,已訪問的沒有可以寫為:

:link--:hover--:visited--:active

:visited會覆蓋hover

為避免沖突,可以使用偽類串聯(lián)

:link:hover{} 這種寫法合法

:link{color:green}

:visited{color:blue}

:link:hover{color:red}

:visited{color:black}

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 學習CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,181評論 0 1
  • CSS基礎 本文包括CSS基礎知識選擇器(重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,437評論 0 40
  • 本文為閱讀《Head First HTML 與 CSS》的css部分的讀書筆記,方便回顧書上的知識,另一篇為Hea...
    兼續(xù)閱讀 1,932評論 0 17
  • 姓名:母光艷 公司:寧波貞觀電器 第235期,利他二組 【日精進打卡第119天】 【知-學習】 誦讀《六項精進》大...
    母光焱閱讀 147評論 0 0
  • 2017年 4月29日 星期六 今天早上媽媽帶著我去詩浦市場買豆腐,我看到里面好多東西呀,就問媽媽:“媽媽,...
    曾雨萱閱讀 353評論 0 0

友情鏈接更多精彩內(nèi)容