在嵌套元素中覆蓋css

我有一個嵌套div結構的div（在行內創建行）。我需要允許用戶設置div（row）css（添加css類）。當css特異性相同時，我正在努力尋找解決方案。例如，我想創建四個級別的嵌套行，第一行用紅色邊框，第二和第三用藍色，第四用紅色。使用下面的標記和CSS第四行有藍色邊框，而不是紅色，因爲CSS特異性是相同的，最後一類應用。在嵌套元素中覆蓋css

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <style> 
     .main { 
      width: 300px; 
      height: 100px; 
     } 

      .main .row { 
       width: 100%; 
       height: 100%; 
       border: 1px solid #808080; 
      } 

       .main .row [class*="span"] { 
        display: block; 
        min-height: 30px; 
        margin-top: 5px; 
        margin-bottom: 5px; 
       } 

      .main .red .bp1 { 
       border: 2px solid red; 
       margin-left: 10px; 
       margin-right: 10px; 
      } 


      .main .blue .bp1 { 
       border: 2px solid blue; 
       margin-left: 20px; 
       margin-right: 20px; 
      } 
    </style> 
</head> 
<body> 

    <div class="main"> 
     <div class="row red"> 
      <div class="span bp1"> 
       <div class="row blue"> 
        <div class="span bp1"> 
         <div class="row blue"> 
          <div class="span bp1"> 
           <div class="row red"> 
            <div class="span bp1"></div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row blue"> 
      <div class="span bp1"> 
       <div class="row red"> 
        <div class="span bp1"> 
         <div class="row blue"> 
          <div class="span bp1"> 
           <div class="row red"> 
            <div class="span bp1"></div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

</body> 
</html>

在第二嵌套的div我想藍/紅/藍/紅行，可惜都是藍色的，因爲這是最後樣式類。

有沒有辦法解決這個問題？

來源

2013-06-12 user2367836

@editor你瘋了嗎？當OP詢問有關該代碼的問題時，您不會重構OP的代碼。 – djechlin

將!important添加到要覆蓋的任何屬性值的末尾。 width: 100% !important;

來源

2013-06-12 21:37:17 Mooseman

加上'！important'並不是真正的解決方案，它是一種骯髒的'黑客'，應該只在所有其他的失敗時才使用！ – Pevara

@PeterVR我不會完全稱它爲黑客... – Mooseman

如果你使用直接子選擇器：>，你應該得到一些有效的東西。

.main { 
      width: 300px; 
      height: 100px; 
     } 

      .main .row { 
       width: 100%; 
       height: 100%; 
       border: 1px solid #808080; 
      } 

       .main .row [class*="span"] { 
        display: block; 
        min-height: 30px; 
        margin-top: 5px; 
        margin-bottom: 5px; 
       } 

      .main .red > .bp1 { 
       border: 2px solid red; 
       margin-left: 10px; 
       margin-right: 10px; 
      } 


      .main .blue > .bp1 { 
       border: 2px solid blue; 
       margin-left: 20px; 
       margin-right: 20px; 
      }

來源

2013-06-12 22:27:33

這將做到這一點，謝謝 – user2367836

在嵌套元素中覆蓋css

回答

相關問題