Overriding properties in CSS

Question

#iddiv span {
    display: inline-block;
    width: 190px;
}
.myclass {
    width:10px;
}

Then I have

    <         


        
                      

              相关标签:
       
      

Answer 1

Remember to use the keyword, !important, which functions to overwrite parent rules.

Also you can define your "myclass" in the following way:

#iddiv span.myclass {
    width:10px;
}

Answer 2

Because id+selector (#iddiv span) is more specific than a class. Either

#iddiv span.myclass

or

#iddiv .myclass

should work for this case.

Learn more about CSS specificity here or by Googling it.

Answer 3

CSS applies styles according to the specificity of the selectors

#iddiv span is more specific than myclass. Changing it to #iddiv .myclass should fix the issue for you.

Here's an article that goes more in depth about this : http://htmldog.com/guides/cssadvanced/specificity/

Answer 4

First of all, I'd suggest you properly target your selectors, as others are suggesting.

But when all else fails, you can use !important.

Answer 5

It's not working because the first style is more specific.

To fix it, make sure you target the second span more directly, like this

#iddiv span.myclass

http://jsfiddle.net/jasongennaro/5fe9A/

Answer 6

You could always use the !important flag to override:

.myclass {
    width: 10px !important;
}