时间戳

首页 > 解决方案 > CSS adjacent sibling selector fails when parent element class is added

html - CSS adjacent sibling selector fails when parent element class is added

问题描述

Fiddle demonstrating issue

This works perfectly

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

This successfully targets the sibling correctly only on page with body classed path-frontpage

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

And this works for the div above footer on page with body classed path-frontpage

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

But this does not set the footer margin-top to zero on page with body classed path-frontpage. Chrome inspector shows the first rule is in effect. Why? Or rather - how do I get the margin negated just on pages with body class path-frontpage ?

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

标签： htmlcss

解决方案

True usage

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

For your code to work, html should was like this.

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>

推荐阅读