html - Adjacent Sibling Selectors CSS - 是否可以将它们分组？

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