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都相同。因此，无论哪个是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/

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

4 个答案: