CSS 选择器层次结构？答案

【问题标题】：CSS Selector Hierarchy?CSS 选择器层次结构？
【发布时间】：2014-09-19 04:06:42
【问题描述】：

我有两个类，我认为它们指向同一个东西，但在使用“左”时它并没有出现。

当我为“.side-menu”选择器编辑“左”时，没有任何反应，但是当我更改“.white-menu .side-menu”的“左”值时，左值会发生变化。但是，当我使用 .side-menu 添加边框时，会出现边框。这是怎么回事？

我在这里搜索并在 Google 上搜索了有关后代选择器和选择器层次结构的信息，但找不到任何东西。提前致谢！！

<!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>

CSS

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

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

jsFIDDLE

【问题讨论】：

标签： css css-selectors css-specificity

【解决方案1】：

css 文件中规则的位置与此关系不大。在上述情况下，“.white-menu .side-menu”规则比“.side-menu”规则具有更强的选择器“特异性”。 “.white-menu .side-menu”有两个匹配点，而“.side-menu”只有一个匹配点。匹配点越多，匹配越强，特异性越高。应用于给定 HTML 元素的多个 css 规则中描述的 HTML 属性将采用更强匹配的值。如果选择器匹配是一个领带，则CSS流中的位置仅赢。这是一个复杂的主题，更多信息在这里：http://www.w3.org/TR/css3-selectors/#specificity

【讨论】：