计算优先级eSzHTML5中文学习网 - HTML5先行者学习网
优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同,靠后的 CSS 会应用到元素上。eSzHTML5中文学习网 - HTML5先行者学习网
注意:元素在文档树中的位置是不会影响优先级的eSzHTML5中文学习网 - HTML5先行者学习网
优先级顺序eSzHTML5中文学习网 - HTML5先行者学习网
优先级逐级增加的选择器列表:eSzHTML5中文学习网 - HTML5先行者学习网
通用选择器(*)eSzHTML5中文学习网 - HTML5先行者学习网
元素(类型)选择器eSzHTML5中文学习网 - HTML5先行者学习网
类选择器eSzHTML5中文学习网 - HTML5先行者学习网
属性选择器eSzHTML5中文学习网 - HTML5先行者学习网
伪类eSzHTML5中文学习网 - HTML5先行者学习网
ID 选择器eSzHTML5中文学习网 - HTML5先行者学习网
内联样式eSzHTML5中文学习网 - HTML5先行者学习网
基于类型的优先级eSzHTML5中文学习网 - HTML5先行者学习网
优先级是根据选择器类型进行计算的. 在下面的例子中,属性选择器尽管选择了一个ID但是在优先级计算法则中还是根据其类型计算。eSzHTML5中文学习网 - HTML5先行者学习网
有如下样式声明:eSzHTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板eSzHTML5中文学习网 - HTML5先行者学习网
* #foo {eSzHTML5中文学习网 - HTML5先行者学习网
color: green;eSzHTML5中文学习网 - HTML5先行者学习网
}eSzHTML5中文学习网 - HTML5先行者学习网
*[id="foo"] {eSzHTML5中文学习网 - HTML5先行者学习网
color: purple;eSzHTML5中文学习网 - HTML5先行者学习网
}eSzHTML5中文学习网 - HTML5先行者学习网
将其应用在下面的HTML中:eSzHTML5中文学习网 - HTML5先行者学习网
XML/HTML Code复制内容到剪贴板eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
I am a sample text.eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
演示例子:https://jsfiddle.net/donqi/vmo5m3re/eSzHTML5中文学习网 - HTML5先行者学习网
选择器优先级一致eSzHTML5中文学习网 - HTML5先行者学习网
优先级相同的情况下,后边定义的会覆盖前边定义的eSzHTML5中文学习网 - HTML5先行者学习网
XML/HTML Code复制内容到剪贴板eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
eSzHTML5中文学习网 - HTML5先行者学习网
css:eSzHTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板eSzHTML5中文学习网 - HTML5先行者学习网
div{eSzHTML5中文学习网 - HTML5先行者学习网
height:100px;eSzHTML5中文学习网 - HTML5先行者学习网
width:100px;eSzHTML5中文学习网 - HTML5先行者学习网
padding:20px;eSzHTML5中文学习网 - HTML5先行者学习网
margin:20px;eSzHTML5中文学习网 - HTML5先行者学习网
border:10px solid hsla(0,0%,0%,0.5);eSzHTML5中文学习网 - HTML5先行者学习网
background-color:#ccc;eSzHTML5中文学习网 - HTML5先行者学习网
background-image:url("/favicon.png");eSzHTML5中文学习网 - HTML5先行者学习网
background-repeat:space;eSzHTML5中文学习网 - HTML5先行者学习网
background-origin:content-box;eSzHTML5中文学习网 - HTML5先行者学习网
}eSzHTML5中文学习网 - HTML5先行者学习网
div.box{eSzHTML5中文学习网 - HTML5先行者学习网
background-clip:content-box;eSzHTML5中文学习网 - HTML5先行者学习网
}eSzHTML5中文学习网 - HTML5先行者学习网
div.border{eSzHTML5中文学习网 - HTML5先行者学习网
background-clip:border-box;eSzHTML5中文学习网 - HTML5先行者学习网
}eSzHTML5中文学习网 - HTML5先行者学习网
div.padding{eSzHTML5中文学习网 - HTML5先行者学习网
background-clip:padding-box;eSzHTML5中文学习网 - HTML5先行者学习网
}