层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示。这个过程的核心是选择器及其相关声明的特殊性,以及继承机制。特殊性对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的 ...
层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示。这个过程的核心是选择器及其相关声明的特殊性,以及继承机制。
特殊性
对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0。一个选择器的具体特殊性如下确定:
对于选择器中给定的各个ID属性值,加0,1,0,0。
对于选择器中给定的各个类属性值,属性选择或伪类,加0,0,1,0。
对于选择器中给定的各个元素和伪元素,加0,0,0,1。
内联样式,加1,0,0,0。
结合符和通配符选择器对特殊性没有任何贡献
h1{color:red;}/* specifity = 0,0,0,1 */p em{color:purple;}/* specifity = 0,0,0,2 */.grape{color:purple;}/* specifity = 0,0,1,0 */*.bright{color:yellow;}/* specifity = 0,0,1,0 */p.bright em.dark{color:maroon;}/* specifity = 0,0,2,2 */#id216{color:blue;}/* specifity = 0,1,0,0 */div#sidebar *[href]{color:silver;}/* specifity = 0,1,1,1 */h1+p{color:black;font-style:italic;}/* specifity = 0,0,0,2 */<h1 >Green</h1> /* specifity = 1,0,0,0*/
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:[读书笔记] CSS权威指南2: 结构和层叠
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。