css 检查以前的元素类

Question

所以，在我的代码中，我有以下可能性：

<div class="price-box">
    <p class="was-old-price">$PRICE$</p>
    <p class="special-price">$PRICE$</p>
</div>

或者

<div class="price-box">
    <p class="old-price">$PRICE$</p>
    <p class="special-price">$PRICE$</p>
</div>

我想当.was-old-price被打印 insted 时.old-price，.special-price具有display:none属性。这可以使用 CSS 来实现吗？

Answer 1

您可以使用Adjacent Sibling Combinator ( +)选择器来做到这一点：

.was-old-price + .special-price {
    display: none;
}

所述E + F选择器选择F立即以下元素E的元素。在这种情况下，.special-price紧跟在.was-old-price元素之后的元素。下面是一个例子：

.was-old-price + .special-price {
  display: none;
}

<h3>Box 1</h3>
<div class="price-box">
    <p class="was-old-price">was-old-price</p>
    <p class="special-price">special-price</p>
</div>

<h3>Box 2</h3>
<div class="price-box">
    <p class="old-price">old-price</p>
    <p class="special-price">special-price</p>
</div>