我认为我有两个类指向同一事物，但在使用“left”时却并非如此。
当我为“.side-menu”选择器编辑“left”时，没有任何反应，但当我更改“.white-menu .side-menu”的“left”值时，left 值发生变化。但是，当我使用 .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;
}
最佳答案
规则在css文件中的位置与它关系不大。在上述情况下，“.white-menu .side-menu”规则比“.side-menu”规则具有更强的选择器“特异性”。 “.white-menu .side-menu”有两个匹配点，而“.side-menu”只有一个匹配点。匹配点越多，匹配越强，特异性越高。适用于给定 HTML 元素的多个 css 规则中描述的 HTML 属性将采用更强匹配的值。 Position in the css stream only wins if the selector match is a tie.这是一个复杂的主题，更多信息在这里:http://www.w3.org/TR/css3-selectors/#specificity
关于CSS 选择器层次结构？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24987293/