Question

我无法找到有关我的问题的任何信息，主要是因为我不太了解CSS以正确地说出搜索查询，所以很抱歉，如果它被问到。

我尝试按以下方式对相邻的兄弟选择器进行分组，以便任何其他元素后面的任何标题都具有给定的边距：

.box * + h1, h2, h3, h4 {
    margin-bottom:0.35em;
    margin-top:1em;
}

这显然是错误的，因为所有标题仍然非常接近前面的元素。有可能做这样的事情，还是我必须单独指定每个标题？我甚至尝试了标题选择器周围的括号......

感谢您的帮助！

HTML：

<div id="work" class="box">
    <h3>5. Once you're happy with your application, send it off to the employer!</h3>
    <h4>Important Stuff to Remember:</h4>
    <p>If you're sending your application by post, you should put a paperclip in the upper left-
    hand corner of your CV to hold it together (do the same thing with the application form if
    there is one), then put your application documents in an A4 envelope (don't fold them) in the
    following order:</p>
    <ul>
        <li>1. Application form (if applicable) at the bottom</li>
        <li>2. Then the CV</li>
        <li>3. Then the cover letter on top (i.e, covering the other documents)</li>
    </ul>
</div>

Answer 1

你必须这样写：

 .box *+h1, .box *+h2, .box *+h3, .box *+h4, .box *+h6, .box *+h6 {
     margin-bottom:0.35em;
     margin-top:1em;
 }

这将导致：this。（我将受影响的标题设为绿色）

你的旧代码会选择所有h2，h3和h4 - 标签，所以也在div之外，以及div中的第一个标头。示例：here

相邻的兄弟选择器CSS - 是否可以对它们进行分组？

1 个答案: