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

什麼!important？

fiddle

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

.rtl .floatleft { 
    float:right; 
} 

更新，以兩種方式工作：

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

Answer 2

這只是你的風格都寫在這種情況下的順序。

.ltr .floatleft和.rtl .floatleft兩者均相等。因此，無論哪一個是CSS文件中的最終規則都將優先。

你需要添加更多的特異性，以實際上你想要發生的規則。

這裏有一個如何你的風格可以根據你已經把什麼樣的順序它們是不同的實例：

JSFiddle with orders swapped and then direct descendant examples.

Answer 3

左浮動需要是它自己的類。

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

.rtl{ 
    float:right; 
} 

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

這樣div容器升將左浮動。容器div rtl將按需要浮動，但ltr的div內容將在該div內左移。這是因爲你不再提供衝突的CSS信息。

Answer 4

解決這個，因爲這缺乏對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(); 
               } 
             } 
           } 
         } 
       } 
     } 
}