8

我有一个包含部分模板的全局模板的网站，但现在我遇到了一个简单的 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

4

5 回答 5

18

这足以让你的选择器更强大一点：

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) - 没有那么强。

更多信息：

于 2013-08-25T11:06:52.190 回答
7

尝试这个 ：

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

无论该规则出现在 CSS 文档中的什么位置，都将始终应用具有!important属性的规则。因此，如果您想确保始终应用某个属性，您可以将!important属性添加到标签中。

于 2013-08-25T11:06:41.170 回答
4

!important将覆盖你的CSS

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

演示

如果你的全局 CSS 有!important

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

于 2013-08-25T11:12:23.917 回答
3

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

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

1.鼓励草率、考虑不周的代码

2.创建不易维护的代码

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

于 2013-08-25T11:15:22.283 回答
1

!important 将覆盖任何样式。

select#test
{
    width: 150px !important;
}
于 2013-08-25T11:08:35.927 回答