国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

CSS代碼是否合理?是否優化?

2024-07-11 08:25:06
字體:
來源:轉載
供稿:網友

發現很多朋友對 CSS 的優先權不甚了解,規則很簡單。需要說明的一點,如果你的樣式管理需要深層判斷 CSS 的優先權,更應反思自己的 CSS 代碼,是否合理?是否優化?
CSS2.1 中規定了關于 CSS 規則 Specificity(特異性)的計算方式,用一個四位的數字串(注:CSS2 中是用三位)來表示,最后以 Specificity 的高低判斷 CSS 的優先權。
Specificity 具體的計算規則: 元素的 style 樣式屬性,加 1,0,0,0。 每個 ID 選擇符(#id),加 0,1,0,0。 每個 class 選擇符(.class)、每個屬性選擇符(例 [attr=”"] )、每個偽類(例 :hover),加 0,0,1,0。 每個元素或偽元素(例 :firstchild)等,加 0,0,0,1。 其他選擇符(例 全局選擇符 *,子選擇符 >),加 0,0,0,0。
最后逐位相加數字串,得到最終的 Specificity 值,按照從左到右的順序逐位比較。
除了 Specificity 還有一些其他規則: !important 聲明的規則高于一切,如果 !important 聲明沖突,則比較優先權。 如果優先權一樣,則按源碼中“后來者居上”的原則。 由繼承而得到的樣式屬性不參與 specificity 的計算,低于一切其他規則(例 全局選擇符 * )。
范例分析:

節選 old9 的《CSS的優先權》(無法穿越 GFW)
h1 {color: red;}
/* 只有一個普通元素加成,結果是 0,0,0,1 */
body h1 {color: green;}
/* 兩個普通元素加成,結果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ,后者勝出*/
h2.grape {color: purple;}
/* 一個普通元素、一個class選擇符加成,結果是 0,0,1,1*/
h2 {color: silver;}
/*一個普通元素,結果是 0,0,0,1 */
/*0,0,1,1 大于 0,0,0,1 ,前者勝出*/
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7個普通元素、一個屬性選擇符、兩個其他選擇符(子選擇符 >),結果是0,0,1,7 */
li#answer {color: navy;}
/* 一個ID選擇符,一個普通選擇符,結果是0,1,0,1 */
/*0,0,1,7 小于 0,1,0,1,后者勝出*/
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 龙里县| 改则县| 法库县| 西乡县| 三台县| 通山县| 辛集市| 杭州市| 桑日县| 天全县| 巍山| 乐业县| 年辖:市辖区| 成安县| 和林格尔县| 景德镇市| 安宁市| 工布江达县| 凤阳县| 江山市| 谢通门县| 开江县| 大安市| 平乐县| 祁门县| 随州市| 鄂州市| 拉孜县| 三亚市| 利川市| 惠安县| 读书| 泾川县| 荥经县| 松原市| 夏邑县| 冕宁县| 来宾市| 澄迈县| 遂宁市| 夏邑县|