选择器的特殊性: 特殊性表述为 4个值(0,0,0,0). 这四个值体现了css选择器对优先级的贡献度
内联: (1,0,0,0)
ID: (0,1,0,0)
类,伪类,属性选择: (0,0,1,0)
伪元素: (0,0,0,1)
通配"*": (0,0,0,0)
组合: 没有贡献
继承: 没有特殊性
*在一般情况下,这是个贡献是没有什么作用的
*但是一旦选择器对元素的选择出现了交集
*例如张三选了某个a标签,李四也选了a标签,设置了不同的字体大小的样式
*但是张三的选择器对优先级的贡献大,浏览器就听张三的,忽略李四的
* 所以在这个例子中,按照一般理解为十进制,我用了12个.test,但是最终显示的仍然是红色
* 所以这12个.test并没有起作用
内联: (1,0,0,0)
ID: (0,1,0,0)
类,伪类,属性选择: (0,0,1,0)
伪元素: (0,0,0,1)
通配"*": (0,0,0,0)
组合: 没有贡献
继承: 没有特殊性
*在一般情况下,这是个贡献是没有什么作用的
*但是一旦选择器对元素的选择出现了交集
*例如张三选了某个a标签,李四也选了a标签,设置了不同的字体大小的样式
*但是张三的选择器对优先级的贡献大,浏览器就听张三的,忽略李四的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
#box{
background-color: red;
}
.test.test.test.test.test.test.test.test.test.test.test.test{
background-color: yellow;
}
</style>
</head>
<body>
<div id="box" class="test">
</div>
</body>
</html>
显示效果:
*一个id选择器的贡献是(1,0,0,0),两个则是(2,0,0,0),100个就是(100,0,0,0) 不会进位
* 所以 (1,0,0,0) 总是大于 (0,100,0,0)的* 所以在这个例子中,按照一般理解为十进制,我用了12个.test,但是最终显示的仍然是红色
* 所以这12个.test并没有起作用