如何手動將樣式從特定樣式表應用於元素？

Question

我有一個與各種樣式表鏈接的表格。 我有兩個樣式表，其中包含select標簽的樣式。 因此，當我鏈接兩個樣式表時，它會發生沖突。

例如

我有style1.css和style2.css，其中包含用於select標簽的樣式。 而且我有兩個ID為select1和select2的選擇標簽。

我只希望將style1.css中的樣式應用於select1，並將style2.css中的樣式應用於select2。 我該怎么做 ？

我無法為這些特定的id指定樣式，因為它也會影響其他選擇標簽。

如何使不同樣式表的樣式僅在特定位置工作？

Answer 1

您可以使用CSS3的:not()選擇器。 例如，在style2.css ，您將編寫：

select:not(#select1) {
    // styling here will be applied to all selects except select1
}

但實際上，您應該只在一個CSS文檔中保留select標記的所有樣式。 這樣，您可以更輕松地控制沖突。

Answer 2

CSS的工作方式是最重要的是最后的設置。 所以，你可以鏈接style1.css ，再style2.css並在年底 style2.css您可以定義樣式select1 ：

#select1
{
  /* styles */
}

它不會影響任何其他元素，僅影響select1 。

但是通常您應該在一個樣式表中合並所選樣式。

Answer 3

您可以將style1 id的類名稱定義為class="style-one" ，然后通過為元素樣式賦予!important標簽來定義樣式。 像這樣：

.style-one{border:none !important;}

此外，您可以在使用的任何樣式表中定義此類，而無需更改順序。:)