如何清除這些樣式

我正在使用第三方引導主題，它通過「智能表單」類爲窗體定義了一個漂亮的UI。我需要將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，以防止這些樣式從智能形式傳播到數據表嗎？

謝謝。

來源

2015-09-08 user1044169

你可以編輯主題的樣式表嗎？或者插入一個覆蓋主題的樣式表？或者添加一個樣式屬性到div？ –

我可以插入我自己的樣式表並覆蓋樣式。 – user1044169

問題出在.smart-form *。 *表示.smart-form以內的所有元素。你必須要解決這樣的事情：

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

這意味着：所有的孩子裏面.smart-form，並非所有元素相匹配的內部.datatable

來源

2015-09-08 15:04:31

這是有效的 - 我不得不添加星號（.datatable *）。唯一的問題是我必須修改第三方樣式表，所以如果來自供應商的更新，更改將會丟失。我希望有一種方法可以在我自己的樣式表中覆蓋它，但是我找不到這樣做的方法。 – user1044169

@ user1044169，請參閱[來自@dfsq的答案]（http://stackoverflow.com/a/32461417/3549014），這樣您就不必編輯第三方樣式表。 –

你可以嘗試取消應用的樣式與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; 
}

來源

2015-09-08 15:13:43 dfsq

由於某些原因，這不起作用 – user1044169

確保在第三方樣式表之後包含這些規則。 – dfsq

如何清除這些樣式

回答

相關問題