html - 相邻兄弟选择器不适用于 h3 元素

Question

我的 HTML DOM 如下所示。我想删除所有 h3 元素的边距和填充，这些元素是 div 的直接兄弟(id=successor)。我使用相邻的兄弟选择器“+”来实现这一点。但我没有得到预期的输出。请帮助我。

<style type="text/css">
    div#successor {
       display: block;
   }
   div#successor+h3 {
      padding :0 !important;
      margin :0 !important;
      border: 1px solid red;
   }
</style>
<div id="access">
<div class="profile clearfix">
    <div id="successor" class="memeberDetails">
        <h3>Personal</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus dolor, vulputate iaculis erat ut, pulvinar commodo orci.Cras ac lorem a lectus luctus vestibulum. Suspendisse odio ligula, fringilla ut ultrices sed, aliquam nec ligula. Praesent porttitor,</p>
        <br />
        <h3>Training</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus dolor, vulputate iaculis erat ut, pulvinar commodo orci.</p>
        <br />
        <h3>Contact</h3>
        <p>Lorem ipsum dolor sit amet</p>

</div>
</div>
</div>

Answer 1

如果你想给 h3 元素添加样式，你需要通过以下方式选择它们:

div#successor>h3

相邻选择器选择“+”运算符左侧对象旁边的元素，因此如果您有这样的结构，它将起作用:

<div id="successor" class="memeberDetails">
    ...
</div>
<h3>...</h3>