如果标记低于其他标记/类名，则从样式中排除标记

Question

我只想样式标签，如果它不存在于特定的标签下。

我希望一个css选择器能够按照下面的示例处理scenario1和scenario2。选择器应该用文本1300和1400将标签"bdi“涂上颜色，但将文本1500排除在"bdi”标签之外，因为"bdi“标记是"del”标签的子标签。

我希望*不是选择器能帮上忙，但我似乎无法让它正常工作。

谢谢

​

    .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元素。