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

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

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 Selectors：

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


计算选择器中的ID选择器数量（= a）

计算选择器中的类选择器，属性选择器和伪类的数量（= b）

计算选择器中的类型选择器和伪元素的数量（= c）


[...]

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

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

更多信息：

Answer 2

试试这个：

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

无论CSS文档中出现该规则的位置，都将始终应用具有！important 属性的规则。因此，如果您想确保始终应用属性，则应将！important 属性添加到代码中。

Answer 3

!important将覆盖您的css

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

demo

如果您的全局css有!important

，该怎么办？

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

Answer 4

它不是关于＆＃34;更好的匹配＆＃34;该规则具有较高的特异性值请查看此link

我建议避免使用！important 你可以阅读它here。这里有几个突出显示为什么不使用！important：

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

2.创建难以维护的代码

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

Answer 5

！important将覆盖任何样式。

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

无法覆盖元素的css

5 个答案: