如果with标记位于其他标记/类名之下，则从样式中排除标记

Question

我只想在特定标记下不存在标记的情况下对其进行样式设置。

我想要一个css选择器能够按照下面的示例处理场景1和场景2。选择器应该给标签"上色；bdi"；具有文本1300和1400，但不包括"；bdi"；用文本1500标记；bdi"；标签是"；del"；标签

我希望：not选择器能帮上忙，但我似乎无法让它工作。

谢谢

.price .amount bdi {
color:red;
}

<div>

<div class="scenario1">
<p class="price">
<span class="amount">
<bdi>1300</bdi>
</span>
</p>    
</div>    
<div class="scenario2">
<p class="price">
<del>
<span class="amount">
<bdi>1500</bdi>
</span>
</del>
<ins>
<span class="amount">
<bdi>1400</bdi>
</span>
</ins>
</p>    
</div>    

<div>

Answer 1

这样尝试：

.price > .amount > bdi,
.price > ins > .amount > bdi {
color:red;
}

<div>

<div class="scenario1">
<p class="price">
<span class="amount">
<bdi>1300</bdi>
</span>
</p>    
</div>    
<div class="scenario2">
<p class="price">
<del>
<span class="amount">
<bdi>1500</bdi>
</span>
</del>
<ins>
<span class="amount">
<bdi>1400</bdi>
</span>
</ins>
</p>    
</div>    

<div>

通过指定.amount必须是.price的直接后代，可以排除两者之间存在del元素的可能性。类似地，您可以在选择器中在它们之间指定一个ins元素。