文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS选择器层次结构？

问CSS选择器层次结构？
EN

Stack Overflow用户

提问于 2014-07-28 01:16:33

回答 1查看 5K关注 0票数 1

我有两个类，我认为它们指向的是相同的东西，但在使用‘左侧’时，它不会出现。

当我为“..side菜单”选择器编辑‘左侧’时，什么都不会发生，但是当我更改“..white menu..side menu”的‘左侧’值时，左边的值就会发生变化。但是，当我使用..side菜单添加边框时，会出现边框。到底怎么回事？

我在这里搜索并搜索关于后代选择器和选择器等级的信息，但是什么也找不到。提前谢谢！！

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

Stack Overflow用户

回答已采纳

发布于 2014-07-28 01:39:04

规则在css文件中的位置与其无关。在上述情况下，“.白菜单.侧菜单”规则比“..side菜单”规则具有更强的选择器“专属性”。“.白菜单.边菜单”有两个匹配点，而“.偏菜单”只有一个匹配点。匹配点越多，匹配越强，特异性越高。应用于给定HTML元素的多个css规则中描述的HTML属性将采用更强匹配的值。只有当选择器匹配为平数时，css流中的位置才会获胜。这是一个复杂的主题，更多信息在这里：http://www.w3.org/TR/css3-selectors/#specificity

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24987293

复制

相似问题

问CSS选择器层次结构？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS选择器层次结构？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS选择器层次结构？
EN