Angulr2：與第三方css的自定義css衝突

在我的Angular2項目中，我將一些常見的css提取到global-style.css文件中，並將其鏈接到index.html中。Angulr2：與第三方css的自定義css衝突

我還將index.html中的第三方css與我的global-style.css中的第三方css衝突鏈接起來。

讓我們來看一個具體的例子。

在我的世界，我的style.css有一番風情

.display-none { display: none; }

在引導CSS有一個風格

input[type="file"] { display: block; }

當我想隱藏文件選擇我寫的代碼

<input class="display-none" type="file">

但文件選取器仍然顯示，因爲input[type="file"]比具有更高的特異性。（根據https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）

有一個Plunker現場演示：https://plnkr.co/edit/7HOT1if3ZhtSGu0UXOZX?p=preview

我的問題是，如何讓我的全球的style.css比其它第三方的CSS更高的優先級？我知道申報!important的方式，但還有其他更優雅的方式嗎？謝謝你的回答！

來源

2017-02-14 someblue

在要在文件中覆蓋的CSS上使用'/ deep /'。例如：'/ deep/.datepicker-input-icon {margin} - 右側：20px！important; vertical-align：middle; }' –

這是一個老問題，但這裏有一種方法可以讓'.display-none'比'input [type =「file」]更高的優先級：通過組合兩者來使選擇器更具體，就像這樣： 'input [type =「file」]。display-none {display：none; }'。 – ConnorsFan

這裏有一些事情你可能會尋找：

將引導您的鏈接「全球的style.css」之前。這將解決您的問題，因爲鏈接的順序是CSS將被引入的順序。
Just use！important。 10個字符的解決方案不是不高雅。

來源

2017-02-14 03:39:12

感謝您的回答！對於解決方案1，它確實解決了具有**相同特異性**的問題css衝突，但是雖然引導程序css具有更高的特異性，但仍會覆蓋我的css。對於解決方案2，我有許多全球風格。如果我爲每個樣式添加'！import'，將會有100 * 10個字符。我認爲它不那麼優雅。 – someblue

Angulr2：與第三方css的自定義css衝突

回答

相關問題