html - 添加父元素类时，CSS相邻兄弟选择器失败

Fiddle demonstrating issue

这完美地工作

.content-wrapper.row-fluid + .footer.row-fluid {
    margin-top: 40px;
}

这样可以成功地仅将兄弟姐妹正确地定位在正文分类为path-frontpage的页面上

.path-frontpage .footer.row-fluid {}

这适用于页面上页脚上方的div，正文分类为path-frontpage

.path-frontpage .content-wrapper.row-fluid {}

但这不会将页面的页脚页边距顶部设置为零，且正文分类为path-frontpage。 Chrome检查器显示第一个规则已生效。为什么？或更确切地说，如何仅在正文类为path-frontpage的页面上使页边距取反？

.path-frontpage .content-wrapper.row-fluid + .path-frontpage .footer.row-fluid {
    margin-top: 0px;
}

最佳答案

真实用法

.path-frontpage .content-wrapper.row-fluid + .footer.row-fluid {
    margin-top: 0px;
}

为了使您的代码正常工作，html应该是这样的。

div { border:1px solid #ff0000; height: 30px; }

.content-wrapper.row-fluid + .footer.row-fluid {
    margin-top: 40px;
}

.path-frontpage .content-wrapper.row-fluid + .path-frontpage .footer.row-fluid {
    margin-top: 0px;
}

<body class="path-frontpage">
<div class="content-wrapper row-fluid">wrapper
</div>
<div class="path-frontpage"> <!-- I added -->
<div class="footer row-fluid">footer
</div>
</div>
</body>

关于html - 添加父元素类时，CSS相邻兄弟选择器失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54450179/

Frontpage

html - 添加父元素类时，CSS相邻兄弟选择器失败