Блог

Я несколько раз использую разные классы начальной загрузки в HTML lt;formgt; . например:

 lt;form id="frmData" name="frmData" method="POST"gt;   lt;div class="row justify-content-sm-center mb-2 align-items-center"gt;   lt;div class="col-12 col-sm-auto d-flex justify-content-md-end"gt;  lt;labelgt;....lt;/labelgt;  lt;/divgt;  lt;div class="col-12 col-sm-6 col-lg-4"gt;  lt;input .....gt;  lt;/divgt;   lt;/divgt;    lt;div class="row justify-content-sm-center mb-2 align-items-center"gt;   lt;div class="col-12 col-sm-auto d-flex justify-content-md-end"gt;  lt;labelgt;....lt;/labelgt;  lt;/divgt;  lt;div class="col-12 col-sm-6 col-lg-4"gt;  lt;input .....gt;  lt;/divgt;   lt;/divgt;     ...... lt;/formgt; 

Есть ли возможность определить a class lt;divgt; для lt;labelgt; примера и повторно использовать его для каждого lt;divgt; , содержащего метку? Это очень помогло бы во время разработки. Вместо изменения классов каждого lt;divgt; из них было бы достаточно изменить только определение класса.

Что — то вроде этого:

 lt;div class="div_class"gt;  lt;labelgt;...lt;/labelgt;  lt;/divgt;   lt;stylegt;  .div_class {  .col-12   .col-sm-auto   .d-flex   .justify-content-md-end  }  lt;/stylegt;  

Я думаю, что это будет единственный способ сделать это в чистом CSS. В этой модели все Div и метки innner должны наследовать настройки из новой оболочки, которую я добавил, и .div_class gt; * это гарантирует, что будут затронуты только дети, а не внуки. Попробуйте в любом случае.

 lt;div class="wrapper"gt;   lt;!-- Now as many of your label divs as you need --gt;   lt;div class="div_class"gt;  lt;labelgt;...lt;/labelgt;  lt;/divgt;  lt;div class="div_class"gt;  lt;labelgt;...lt;/labelgt;  lt;/divgt;  lt;div class="div_class"gt;  lt;labelgt;...lt;/labelgt;  lt;/divgt;  lt;/divgt;  

И CSS

 .wrapper * {  color: black;  } .div_class gt; * {  color:blue; }