Question

我想将我的代码放在容器div中，这样我就可以将它放在页面中间并居中对齐。但是，当我将我的跨度放在容器中时，它似乎使我的CSS无效。任何人都可以告诉我如何更改CSS以最正确的方式应用于我的新代码。

CSS

#featurenav {
    background:#000;
    color:#FFF;
    height:50px;
    padding:0 1em;
    transition:0.3s;
}
#featurenav > span {
    display:inline-block;
    font-weight:bold;
    padding:1em;
    margin-right:1em;
    opacity:.5;
}
#featurenav > span.active {
    opacity:1;
}
#featurenav.fixed {
    position:fixed;
    width:100%;
    top:0;
}

旧HTML

<nav id="featurenav">
    <span class='a1'>Section 1</span>
    <span class='a2'>Section 2</span>
    <span class='a3'>Section 3</span>
</nav>

新HTML

<nav id="featurenav">
<div class="container">
    <span class='a1'>Section 1</span>
    <span class='a2'>Section 2</span>
    <span class='a3'>Section 3</span>
</div>
</nav>

Answer 1

这是因为您使用direct descendant/child selector >来设置跨度的样式。当您使用其他<div>包裹跨度时，它们将不再是#featurenav的直接后代。请改用：

#featurenav span {
    display:inline-block;
    font-weight:bold;
    padding:1em;
    margin-right:1em;
    opacity:.5;
}
#featurenav span.active {
    opacity:1;
}

但是，如果你想对如何选择后代非常严格（即你只想从<span>选择#featurenav嵌套的两个级别），那么你应该使用它，虽然我没有根据您的标记看到它是必要的，除非您在#featurenav内有其他跨度。

#featurenav > div > span {
    display:inline-block;
    font-weight:bold;
    padding:1em;
    margin-right:1em;
    opacity:.5;
}
#featurenav > div > span.active {
    opacity:1;
}

当HTML放在div中时，CSS中断

1 个答案: