相邻同级选择器不适用于 h3 元素

Question

下面给出了我的HTML DOM。我想删除所有 h3 元素的边距和填充，这是div 的直系兄弟（id=继任者）。我使用相邻的同级选择器"+"来实现这一点。但我没有得到预期的输出。请帮助我。

<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>

Answer 2

正如 IMSoP 所说，#successor 是父级，您希望选择其直系子级。您可能希望使用 ： div#successor>h3下面是一个工作示例：http://jsfiddle.net/Au4Vh/