Question

.formWrap input[type="text"] {
    font-size: 12px;    
}

.bigger {
    font-size: 14px
}

<div class="formWrap">
    <input type="text" class="bigger" />
</div>

为什么上面没有输入字段14px的文本？

当我使用input[type="text"]选择器时，如何定位属于formWrap的子类的特定类？

是否有更好的方法可以为我的所有输入提供特定的样式，然后能够对某些输入进行调整（希望基于类）？

Answer 1

答案是Specificity。

您的第一个选择器具有比第二个选择器更高的特异性，因此其属性具有优先级。

.formWrap input[type="text"]包含类，元素和属性选择器。根据CSS选择器规范（上面链接），此选择器的特异性为21. .bigger另一方面只有 class 选择器，因此只有10的特异性。 21大于10.

来自MDN：

特异性是浏览器决定哪些属性值与元素最相关并且可以应用的方法。特异性仅基于由不同种类的选择器组成的匹配规则。

在您的情况下，让第二个选择器优先于第一个选择器的简单方法是增加此选择器以具有相同或更高的特异性：

input.bigger {}    /* 11 */

您甚至可以多次重复使用相同的选择器（如规范中所述）：

input.bigger.bigger {}               /* 21 */

请注意，如果两个选择器的特异性相等，则样式表中稍后包含的选择器将是优先选择的选择器。

Answer 2

第一个选择器的特异性高于.bigger类。

要提高.bigger类的特异性，您可以这样做：

.formWrap input[type="text"]{
       font-size: 12px; 
}

.formWrap input[type="text"].bigger{
       font-size: 14px
}

OR（不是真的推荐）：

.bigger{
font-size: 14px !important;
}

Answer 3

有一篇关于特异性以及如何计算的好文章。首次开始编写CSS时需要一段时间才能点击的内容。

计算CSS特异性值 http://css-tricks.com/specifics-on-css-specificity/

选择器对类的CSS优先级

3 个答案: