Question

我认为有两个课程，我认为它们指的是同一个东西，但在使用＆＃39; left时它并没有出现。＆＃39;

当我编辑＆＃39; left＆＃39;对于＆＃34; .side-menu＆＃34;选择器，没有任何反应，但是当我改变左边的时候。＆＃34; .white-menu .side-menu＆＃34;的值，左边的值会改变。但是，当我使用.side-menu添加边框时，会出现边框。发生了什么事？

我在这里搜索并搜索有关后代选择器和选择器层次结构的信息，但无法找到任何内容。在此先感谢!!

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

Answer 1

规则在css文件中的位置与它几乎没有关系。在上面的情况下，＆＃34; .white-menu .side-menu＆＃34;规则有更强的选择器和特异性＆＃34;而且＆＃34; .side-menu＆＃34;规则。＆＃34; .white-menu .side-menu＆＃34;有两个匹配点而不是＆＃34; .side-menu＆＃34;只有一个匹配点。匹配越多，匹配越强，特异性越高。应用于给定HTML元素的多个css规则中描述的HTML属性将采用更强匹配的值。如果选择器匹配是平局，则仅在css流中的位置获胜。这是一个复杂的主题，更多信息请参见：http://www.w3.org/TR/css3-selectors/#specificity

CSS Selector层次结构？

1 个答案: