无法覆盖元素的CSS [英] Can't override css of element

问题描述

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

HTML

 < div id =context> <！ - 这是全局模板的一部分 - > 
<！ - 这是由部分模板呈现 - > 
< select id =test> 
< option> [选择值]< / option> 
< / select> 
< / div> 
  

全局CSS

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

  div＃context select 
 {
 width：500px; 
} 
  

部分CSS

现在对于部分模板（它在 #context 中呈现内容），我需要覆盖 ;选择> 。我认为这将是简单的：

  select＃test 
 {
 width：150px; 
} 
  

但我错了，它不工作。我想这是因为css认为 div＃context select 是更好的匹配元素，因为它工作时，我改变部分模板css像这样：

  div＃context select＃test 
 {
 width：150px; 
} 
  

当然，这不是我想做的，不应该知道它在全局模板中被渲染在哪个节点。

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

请参阅 jsFiddle

解决方案

这足以让你的选择器有点强：

  body select＃test 
 {
 width：150px; 
} 
  

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

从 W3 - CSS选择器：

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

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


• （= c）


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

[...]

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

因此， div＃context select 是1个ID和2个元素：0 | 1 | 2

但是： select＃test 是1 ID和1个元素（0 | 1 | 1） >

更多信息：

• MDN - 特定性


• 特异性计算器

I have a website with a global template that contains partial templates, but now I'm stuck with a simple CSS problem:

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>

Global CSS

In a global stylesheet the default width for all <select> elements inside #context is defined:

div#context select
{
   width: 500px;
}

Partial CSS

Now for the partial template (which renders content inside #context), I need to override the default width of <select>. I thought this would be as simple as:

select#test
{
    width: 150px;
}

But I was wrong, it doesn't work. And I guess it is because css thinks div#context select is a better match for the element, because it works when I change the partial template css like this:

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

Of course, this is not what I want to do, because the partial template should not know in which node it is rendered inside the global template.

Any ideas on how I can override the style for the partial template without specifying an element from the global template?

See jsFiddle

解决方案

It is enough to make your selector just a little bit stronger:

body select#test
{
    width: 150px;
}

Example: http://jsfiddle.net/XvZSz/2/

From 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.

So, div#context select is 1 ID and 2 elements: 0|1|2
But: select#test is 1 ID and 1 element (0|1|1) - not as strong.

More info:

• MDN - Specificity
• Specificity Calculator

这篇关于无法覆盖元素的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！