Перезаписать css во вложенных элементах

У меня есть вложенная структура html с divs внутри divs (создание строк внутри строк). Мне нужно разрешить пользователю устанавливать 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>

Во второй вложенной дивы Я хочу, чтобы получить синий/красный/синий/красный строк, к сожалению, все синие, потому что это последний класс стиля.

Есть ли способ решить эту проблему?

источник

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 во вложенных элементах

ответ

Смежные вопросы