how can I change top-margin the right way if multiple css class assigned?
I assigned these classes menu second_menu menu_about_author to ul so the html code looks like <ul class="menu second_menu menu_about_author">
I wanted this ul to have the same properties like menu and second_menu and then I wanted to move the menu_about_author little bit down.
I did so by .menu_about_author { margin-top:40px; }
but it didn't work
any idea why the margin-top:40px; is crossed? the link to the i开发者_StackOverflow中文版mage is [1]: http://img153.imageshack.us/img153/882/58daeef0c3c846e4a8d6321.png
alt text http://img153.imageshack.us/img153/882/58daeef0c3c846e4a8d6321.png
use
.custom .menu.second_menu.menu_about_author { margin-top:40px; }
or
.custom .second_menu.menu_about_author { margin-top:40px; }
as selector
otherwise your margin is overwritten by the second_menu margin
probably also
.custom .menu_about_author { margin-top:40px; }
will work if this code is after .custom .second_menu
Because .custom .second_menu
has higher Specificity than .menu_about_author
In other words, .custom .second_menu
is more specific than .menu_about_author
, so it take priority.
You can learn about this here...
http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
You can solve the problem by doing something like this...
.custom .menu_about_author
or
.custom ul.menu_about_author
Other answers also have suggestions that will work by making your author entry more specific.
To quickly se if its an inheritance problem, you can use !important
.menu_about_author { margin-top:40px !important; }
精彩评论