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()本身没有给出选择器权重，但内部的每个属性选择器都给出与类相同的权重。

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

由于一个元素选择器（0,0,1）和三个属性选择器，

input:not([type=submit]):not([type=file]):not([type=image])将具有总权重（0,3,1） strong>（0,1,0）x3 因此优先。

注意：只有特异性完全相同时，顺序才有意义。

在此处阅读有关css选择器特异性的更多信息：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

正如Dipesh Parmar所说，检查加载内联/外部css代码的顺序，

如果您不想更改订单... 你总是可以在你想要的属性值之后使用!important：

<style>
input.radv
{
    vertical-align:middle;
    margin:0px;
    padding-bottom:4px !important;/*the `important` will make sure this property applies unless there is another property with `!important` value next to this one in DOM*/
}
</style>

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

2 个答案: