在嵌套元素中覆盖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

回答

相关问题