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打印.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>

css检查以前的元素类

1 个答案: