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.

Answer 2

Float Left 必须是它自己的类。

.ltr {  
    float:left;
}
.floatleft{
    float:left;
}

.rtl{  
    float:right;
}

http://jsfiddle.net/pnM53/1/

这样容器 div ltr 将向左浮动。容器 div rtl 将根据需要向右浮动，但 ltr 的 div 内容将在该 div 内向左浮动。这是因为您不再提供相互冲突的 CSS 信息。

Answer 3

由于缺乏 CSS 的支持，解决这个问题的最佳方法是添加冗余和嵌套规则，即：

.ltr .floatleft {  
    float:left;
}

.rtl .floatleft {  
    float:right;
}

.rtl .floatleft .ltr .floatleft {
    float:left;
}

.rtl .floatleft .ltr .floatleft .rtl .floatleft {
    float:right;
}

.rtl .floatleft .ltr .floatleft .rtl .floatleft .ltr .floatleft {
    float:left;
}

.rtl .floatleft .ltr .floatleft .rtl .floatleft .ltr .floatleft .rtl .floatleft {
    float:right;
}

依此类推... .ltr 的开头必须与 .rtl 一样...添加任意数量的内容.. 不幸的是，这是获得这种行为的唯一方法...

**或更少：**

.ltr(){
        direction: ltr;

        &.fl, .fl {
                float:left;
        }

        &.fr, .fr {
                float:right;
        }
}

.rtl(){
        direction: rtl;

        &.fl, .fl {
                float:right;
        }

        &.fr, .fr {
                float:left;
        }
}

[dir=ltr] {
        .ltr();
        [dir=rtl] {
                .rtl();
                [dir=ltr] {
                        .ltr();
                        [dir=rtl] {
                                .rtl();
                                [dir=ltr] {
                                        .ltr();
                                        [dir=rtl] {
                                                .rtl();
                                                [dir=ltr] {
                                                        .ltr();
                                                }
                                        }
                                }
                        }
                }
        }
}

[dir=rtl] {
        .rtl();
        [dir=ltr] {
                .ltr();
                [dir=rtl] {
                        .rtl();
                        [dir=ltr] {
                                .ltr();
                                [dir=rtl] {
                                        .rtl();
                                        [dir=ltr] {
                                                .ltr();
                                                [dir=rtl] {
                                                        .rtl();
                                                }
                                        }
                                }
                        }
                }
        }
}

Answer 4

!important 呢？

fiddle

.ltr .floatleft {  
    float:left !important;
}

.rtl .floatleft {  
    float:right;
}

更新为双向工作：

http://jsfiddle.net/3E4Me/2/