CSS Selector Hierarchy?

问题

I have two classes that I think are pointing to the same thing, but it doesn't appear so when using 'left.'

When I edit 'left' for the ".side-menu" selector, nothing happens, but when I change the 'left' value for ".white-menu .side-menu", the left value changes. When I add a border using .side-menu, however, a border appears. What's going on?

I searched here and Googled for info on descendant selectors and selector hierarchies but couldn't find anything. Thanks in advance!!

<!DOCTYPE html>
<html>
    <head>
         <title>test</title>
         <link rel = 'stylesheet' href = 'slideout.css'>
    </head>

    <body class = 'white-menu'>
         <nav class = 'side-menu'>  This is a side menu </nav>  
    </body>
</html>

THE CSS

.side-menu{
    background-color:green;
    position: fixed;
    top: 0;
    left: 40px;
    width: 210px;
    height: 100%;
 }

.white-menu .side-menu {
   left: 20px;
 }

jsFIDDLE

回答1:

Position of the rule in the css file has little to do with it. In the case above the ".white-menu .side-menu" rule has a stronger selector "specificity" than does the ".side-menu" rule. ".white-menu .side-menu" has two matching points versus ".side-menu" having only one matching point. The more matching points the stronger the match and the higher the specificity. HTML attributes described in multiple css rules that apply to a given HTML element will take the value of the stronger match. Position in the css stream only wins if the selector match is a tie. This is a complex subject, more info here: http://www.w3.org/TR/css3-selectors/#specificity

来源：https://stackoverflow.com/questions/24987293/css-selector-hierarchy

标签

css

css-selectors

css-specificity