CSS选择器层次结构？ [英] CSS Selector Hierarchy?
问题描述
我有两个我认为指向同一事物的类，但是使用'left'时不会出现。
I have two classes that I think are pointing to the same thing, but it doesn't appear so when using 'left.'
当我编辑'left'时'对于 .side-menu选择器，什么也没有发生，但是当我更改 .white-menu .side-menu的 left值时，左边的值就会改变。但是，当我使用.side-menu添加边框时，会出现边框。这是怎么回事？
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?
我在这里搜索，并在Google中搜索了有关后代选择器和选择器层次结构的信息，但找不到任何东西。
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>
CSS
THE 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属性将采用更强匹配的值。仅当选择器匹配为平局时，css流中的位置才会获胜。这是一个复杂的主题，更多信息请参见： http://www.w3.org/ TR / css3-selectors /＃specificity
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
这篇关于CSS选择器层次结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
