Question

我的输入框的CSS优先级有问题。正在应用宽度96%，同时根据优先规则应应用auto宽度。如果我应用!important，则应用我想要的样式。然而，这不是我想解决问题的方式。

我有一个输入框以这种方式实现

<fieldset>
    <label>Search</label>
    <input type="text" class="standard-size"> <!-- Referring to this -->
</fieldset>

受到这两个CSS声明的影响：

fieldset input[type=text] {
        width: 96%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #BBBBBB;
        height: 20px;
        color: #666666;
        -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
        -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
        box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
        padding-left: 10px;
        background-position: 10px 6px;
        margin: 0;
        display: block;
        float: left;
        margin: 0 10px;
}

.standard-size {
    width: auto ;
}

根据此链接： http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

优先级以这种方式工作（内联样式，ID，类，元素）。左侧的数字位于右侧的任何数字之前。

在我的情况下： fieldset input [type = text]转换为（0,0,0,2），因为fieldset和input是2个元素和 .standard-size转换为（0,0,1,0），因为.standard-size是一个CSS类

（0,0,1,0）应该优先于（0,0,0,2）因为1比左边的更多，这使得它更重要。那么为什么96％的宽度接管？

谢谢

Answer 1

您忘了计算[type=text]属性选择器，它等同于类选择器（在您链接的文章中也提到过）：

fieldset input[type=text] /* 1 attribute, 2 types -> specificity = (0, 0, 1, 2) */
.standard-size            /* 1 class              -> specificity = (0, 0, 1, 0) */

虽然属性选择器和类选择器是等价的，但是第一个规则中的两个类型选择器会导致它超过第二个。

Answer 2

因为[type=text]是一个属性，所以它会添加（0,0,1,0）（source）。所以你的第一套规则实际上具有特异性（0,0,1,2），大于（0,0,1,0）。

CSS优先规则未在输入框的宽度上正确应用

2 个答案: