gpt4 book ai didi

CSS 选择器层次结构?

转载 作者:行者123 更新时间:2023-11-28 17:36:36 24 4
gpt4 key购买 nike

我认为我有两个类指向同一事物,但在使用“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;
}

jsFIDDLE

最佳答案

规则在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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com