选择器的CSS优先级超过类

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

.bigger { 
    font-size: 14px 
} 

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

为什么上述内容不能输入字段14px的文本？选择器的CSS优先级超过类

当我使用input[type="text"]选择器时，我该如何锁定formWrap的孩子？

有没有更好的方法给我所有的输入一个特定的风格，然后能够调整某些输入（希望基于一个类）？

来源

2014-09-23 Kline

第一个选择器比.bigger类具有更高的特异性。

为了增加.bigger类的特殊性，你可以这样做：

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

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

OR（并不推荐）：

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

来源

2014-09-23 13:08:54 HaukurHaf

好吧，似乎工作 – Kline 2014-09-23 13:11:46

答案是Specificity。

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

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

从MDN：

特异性是由浏览器决定哪些属性值是最相关的元素，并得到要被施加的装置。特定性仅基于由不同种类的选择器组成的匹配规则。
input.bigger {} /* 11 */ 
你甚至可以重复相同的选择：

在你的情况，一个简单的方法让你的第二选择，以在第一是通过增加此选择具有相同或更高的特异性优先多次（如说明书中还指出）：

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

注意，如果同时选择的特异性相等，则选择包含在你的样式表以后会一个优先。

来源

2014-09-23 13:06:54

你可能解释为什么它具有较高的特异性（因为有一类+一个孩子选择）与只是一个类选择。 – enguerranws 2014-09-23 13:07:58

好吧，但我怎么可以去关于样式特定的输入框类型的已经由一般输入样式的样式？ – Kline 2014-09-23 13:08:56

@Kline查看我编辑的答案。 – 2014-09-23 13:13:17

上有特异性和好的文章如何在这里计算。首次开始写入CSS时需要一段时间才能点击的东西。

计算CSS具体数值 http://css-tricks.com/specifics-on-css-specificity/

来源

2014-09-23 13:10:22 jdunham

选择器的CSS优先级超过类

回答

相关问题