无法覆盖元素的css

Question

我有一个包含部分模板的全局模板的网站，但现在我遇到了一个简单的CSS问题：

HTML

<div id="context"> <!-- this is part of global template -->
    <!-- this is rendered by partial template -->
    <select id="test">
        <option>[Select a value]</option>
    </select>
</div>

全球CSS

在全局样式表中，定义了#context所有<select>元素的默认宽度：

div#context select
{
   width: 500px;
}

部分CSS

现在对于部分模板（在#context中呈现内容），我需要覆盖<select>的默认宽度。 我以为这会很简单：

select#test
{
    width: 150px;
}

但我错了，它不起作用。 我猜这是因为css认为div#context select更适合元素，因为当我更改部分模板css时它会起作用：

div#context select#test
{
    width: 150px;
}

当然，这不是我想要做的，因为部分模板不应该知道它在全局模板中呈现在哪个节点中。

关于如何在不指定全局模板中的元素的情况下覆盖部分模板的样式的任何想法？

见jsFiddle

Answer 1

这足以使您的选择器更强一些：

body select#test
{
    width: 150px;
}

示例： http ： //jsfiddle.net/XvZSz/2/

来自W3 - CSS选择器 ：

选择器的特异性计算如下：

• 计算选择器中ID选择器的数量（= a）
• 计算选择器中的类选择器，属性选择器和伪类的数量（= b）
• 计算选择器中类型选择器和伪元素的数量（= c）

[...]

连接三个数字a | b | c（在具有大碱基的数字系统中）给出特异性。

因此， div#context select是1个ID和2个元素：0 | 1 | 2
但是： select#test是1个ID和1个元素（0 | 1 | 1） - 没有那么强。

更多信息：

• MDN - 特异性
• 特异性计算器

Answer 2

试试这个 ：

select#test
{
    width: 150px !important;
}

无论CSS规则中出现哪个规则，都将始终应用具有！important属性的规则。 因此，如果要确保始终应用属性，则应将！important属性添加到标记中。

Answer 3

!important会覆盖你的CSS

select#test
{
    width: 150px !important;
}

演示

如果你的全球css有!important怎么办!important

然后你可以调用body select#test{/*call your css*/}

Answer 4

它不是关于“更好匹配”规则具有更高的特异性值请查看此链接

我建议避免使用！重要你可以在这里阅读。 这里有几个亮点为什么不使用！重要：

1.鼓励草率，经过深思熟虑的代码

2.创建不太可维护的代码

3.Overrides在用户样式表中声明的样式，从而降低了可访问性

Answer 5

！important将覆盖任何样式。

select#test
{
    width: 150px !important;
}