Can't override css of element

Question

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

HTML

        
                      

              相关标签:
       
      

Answer 1

It's not about "better match" the rule has higher specificity value please check this link

I would recommend to avoid the use of !important You can read about it here. Here several highlights why not to use !important:

1.Encourages sloppy, poorly thought-out code

2.Creates code that is less maintainable

3.Overrides styles declared in user style sheets, thus degrading accessibility

Answer 2

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

Answer 3

!important will override any style.

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

Answer 4

Try this :

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

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.

Answer 5

!important will override your css

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

demo

what if your global css has !important

Then you could call body select#test{/*call your css*/}