html - 无法覆盖元素的 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

在全局样式表中，所有 <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 :

A selector's specificity is calculated as follows:

• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the selector (= c)

[...]

Concatenating the three numbers a|b|c (in a number system with a large base) gives the specificity.

因此，div#context select 是 1 个 ID 和 2 个元素:0|1|2
但是:select#test 是 1 个 ID 和 1 个元素 (0|1|1) - 没那么强。

更多信息:

• MDN - Specificity
• Specificity Calculator