Question

当且仅当其相邻的兄弟是某个元素时，我想选择一个元素。

<div>
    <h1>Select Me</h1>
    <h2>I'm the sibling, yay!</h2>
    <div>
        <p>A paragraph.</p>
    </div>
</div>
<div>
    <h1>Don't Select Me - I have no h2 sibling. :(</h1>
    <div>
        <p>A longer paragraph.</p>
    </div>
</div>

在此特定示例中，我只想选择第一个h1，因为它有一个相邻的h2。另一个h1不符合该标准，因此我不希望它被选中。

我找到this但它不会为我工作，因为该元素有其他兄弟姐妹而且从来不是唯一的孩子。

Answer 1

CSS中还没有先前的元素选择器。有一个相邻的兄弟选择器：+并且有一个普通的兄弟选择器：~。

以为我可以给你一个jQuery解决方案：

$('h2').prev('h1').addClass('favH1');

h1.favH1{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <h1>Select Me</h1>
    <h2>I'm the sibling, yay!</h2>
    <div>
        <p>A paragraph.</p>
    </div>
</div>
<div>
    <h1>Don't Select Me - I have no h2 sibling. :(</h1>
    <div>
        <p>A longer paragraph.</p>
    </div>
</div>

CSS选择带有兄弟的元素

1 个答案: