Как очистить эти стили

Question

Я использую тему начальной загрузки третьей части, которая определяет красивый внешний интерфейс для форм через класс «умная форма». Мне нужно включить DataTable в форму и что DataTable выглядит испорченным. Мой HTML выглядит вроде как, что:

<form class="smart-form"> 
    .... form controls .... 
    <div class="data-table">....</div> 
    .... form controls .... 
</form> 

Я отслеживал проблему вниз эти стили от smart-form применяется к datatable:

.smart-form *, .smart-form :after, .smart-form :before { 
    margin: 0; 
    padding: 0; 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
} 

Если в Chrome я отмените эти стили, моя таблица данных выглядит нормально ,

Могу ли я применить некоторые стили к таблице данных DIV, чтобы эти стили не распространялись на интеллектуальную форму в таблицу данных?

Спасибо.

Answer 1

Проблема в .smart-form *. * означает все элементы внутри .smart-form. Вы должны обойти что-то вроде этого:

.smart-form > *:not(.datatable *) 

Это означает: всех детей в .smart-form, которые не совпадают со всеми элементами внутри .datatable

Answer 2

Вы можете попытаться отменить примененные стили с inherit правилом:

.smart-form .data-table, 
.smart-form .data-table *, 
.smart-form .data-table :after, 
.smart-form .data-table :before { 
    margin: inherit; 
    padding: inherit; 
    box-sizing: inherit; 
    -moz-box-sizing: inherit; 
}