html - CSS 嵌套规则，覆盖规则的意外行为

Question

我遇到了一种奇怪的行为，但它可能是应该的，但它是出乎意料和不受欢迎的。

示例 HTML:

<div class='rtl'>

    <div class='ltr'>

        <div class='floatleft'>
            A 
        </div>        
        <div class='floatleft'>
            B
        </div>

    </div>

</div>

和 CSS:

.ltr .floatleft {  
    float:left;
}

.rtl .floatleft {  
    float:right;
}

然而，输出是向右浮动的，因为这是在 css 文件中最后指定的规则:.rtl .floatleft { float: right }

但是，由于类“ltr”是在嵌套元素上指定的，所以我希望或希望优先使用该规则，以便您始终可以覆盖祖先应用的任何内容。

但这并不奏效。有什么方法我在这里看不到吗？

这是另一个与此类似的问题:

CSS select next match

Answer 1

这只是您在这种情况下编写样式的顺序。

.ltr .floatleft 和 .rtl .floatleft 都等于 true。因此，无论哪个是 CSS 文件中的最终规则，都将优先考虑。

您需要为您实际想要发生的任何规则添加更多特异性。

这是一个示例，说明您的样式如何根据您放置它们的顺序而有所不同:

JSFiddle with orders swapped and then direct descendant examples.