CSS编码是不是有效?是不是提升?

2021-03-17 01:09 jianzhan

发现许多盆友对 CSS 的优先选择权不甚掌握,标准很简易。必须表明的1点,假如你的款式管理方法必须深层次分辨 CSS 的优先选择权,更应反思自身的 CSS 编码,是不是有效?是不是提升?
CSS2.1 中要求了有关 CSS 标准 Specificity(特异性)的测算方法,用1个4位的数据串(注:CSS2 中是用3位)来表明,最终以 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 也有1些别的标准: !important 申明的标准高于1切,假如 !important 申明矛盾,则较为优先选择权。 假如优先选择权1样,则按源代码中“青出于蓝而胜于蓝”的标准。 由承继而获得的款式特性不参加 specificity 的测算,低于1切别的标准(例 全局性挑选符 * )。
案例剖析

节选 old9 的《CSS的优先选择权》(没法穿越 GFW)
h1 {color: red;}
/* 仅有1个一般元素加成,結果是 0,0,0,1 */
body h1 {color: green;}
/* 两个一般元素加成,結果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ,后者胜出*/
h2.grape {color: purple;}
/* 1个一般元素、1个class挑选符加成,結果是 0,0,1,1*/
h2 {color: silver;}
/*1个一般元素,結果是 0,0,0,1 */
/*0,0,1,1 超过 0,0,0,1 ,前者胜出*/
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个一般元素、1个特性挑选符、两个别的挑选符(子挑选符 >),結果是0,0,1,7 */
li#answer {color: navy;}
/* 1个ID挑选符,1个一般挑选符,結果是0,1,0,1 */
/*0,0,1,7 小于 0,1,0,1,后者胜出*/