Strange css priority behavior for font-family in Chrome

Question

I need to customize styles for my menu. In IE, it works fine, but in Chrome, I find I cannot modify the font-family for links in the menu. For text in span or div, it's OK. I use simple selector to make my rule prior to default rule. But the development tool shows like this:

You can see that my rule doesn't override the default rule. I tried to add important, development tool shows OK as below, but the font doesn't change at all:

The only thing I tried to make my rule work is to delete the original CSS rule ".tundra .dijitMenuItem" in "Menu.css". But it is the default rule given by framework, I don't want to modify it.

The element in dom is shown below:

How can this happen, and how to make my rule work?

Updated: I tried many ways to test the behaviors. Seems like if only I put my rule to .dijitMenuItem or it's children, it can override the default. Otherwise, no matter how specific my selector is, it won't be applied. I made a simple example like below: the complete example is on JsFiddle:

.theme .sub-container
{
  font-family: Arial; 
}

body.theme div.container
{
    font-family: sans-serif; //this doesn't work
}



.theme .sub-container2
{
    font-family: sans-serif;
}
body.theme div.sub-container2
{
    font-family: Arial; //this works
}

Can anyone explain this? Does font-family's inherit and overridden are different with other CSS properties?

Answer 1

try to Set the font family in your anchor tag. i think it should be work.