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

作为 IMSoP 表示#successor是父级，您想要选择其直接子级。您可能想要使用：div#successor>h3 这是一个工作示例：http://jsfiddle.net/Au4Vh/

Answer 2

如果要向h3元素添加样式，则需要通过以下方式选择它们：

div#successor>h3

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

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

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

2 个答案: