为什么chrome不遵循CSS优先顺序？

Question

我正在尝试对齐我的单选按钮.它们的实现如下:

<input type="radio" name="type" class="radv" value="0" />

这是本地文件头中定义的样式:

<style>
input.radv
{
    vertical-align:middle;
    margin:0px;
    padding-bottom:4px;
}
</style>

这是我的外部CSS文件中的冲突样式:

input:not([type=submit]):not([type=file]):not([type=image]) {
 border: 1px solid #e1e1e1;
 background-color:#fff;
 padding:2px;
 height:18px;
}

不知何故,外部的"输入"风格正在取得优势.本地样式不应该优先于外部CSS文件吗？

Answer 1

外部样式表中的规则优先的原因是特异性.内部定义<style>与否定义并不重要.

虽然:not()它本身不提供选择器权重,但内部的每个属性选择器都给出与类相同的权重.

input.radv由于一个元素选择器(0,0,1)和一个类(0,1,0),将具有总权重(0,1,1 ).

input:not([type=submit]):not([type=file]):not([type=image])由于一个元素选择器(0,0,1)和三个属性选择器(0,1,0)x3,因此将具有总权重(0,3,1),因此优先.

注意:只有特异性完全相同时,顺序才有意义.