2

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

<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 文件吗？

4

2 回答 2

5

来自外部样式表的规则优先的原因是特异性。是否在内部定义<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)，因此具有优先权。

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

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

于 2013-08-19T09:54:06.620 回答
1

正如 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>
于 2013-08-19T09:17:14.093 回答