將3個CSS選擇器組合為一個

Question

一共有3個表格： #table1 ， #table2和#table3 。

有沒有一種方法可以指定所有3個表的樣式，而無需使用CSS類？

例如，我們可以結合以下選擇器：

#table1 tbody td a, #table2 tbody td a, #table3 tbody td a {
    /* rules here */
}

變成類似：

(#table1, #table2, #table3) tbody td a {
    /* rules here */
}

Answer 1

您可以使用屬性選擇器：

[id^="table"] tbody td a {
   /* your code */
}

Answer 2

在CSS中做到這一點的方法將是 :any選擇器 ：

:any(#table1, #table2, #table3) tbody td a {
    color: red;   
}

目前這是實驗性的，僅在Firefox，Chrome / Opera和Safari中受支持。 由於它是帶前綴的版本，因此僅列出每個ID的規則可能不會為您節省任何鍵入時間，因為您需要為每個前綴都有一個規則：

:-moz-any(#table1, #table2, #table3) tbody td a {
    color: red;   
}
:-webkit-any(#table1, #table2, #table3) tbody td a {
    color: red;   
}

演示

正如BoltClock在評論中指出的那樣，當前此功能的CSSWG建議是:matches()偽類， 這是一篇不錯的文章，它說明了選擇器以及如何通過Sass獲得相同的結果。

Answer 3

如果必須執行此操作，則可以按如下方式使用屬性選擇器 ：

[id^="table"] td a {

}

但是，通常最好使用類定義將相同的樣式應用於多個元素。 它不僅性能更高，而且可以更好地擴展以備將來使用，這意味着您的元素ID受保護。

例如，如果您想添加另一個ID為table-view元素，現在將導入CSS規則，而無需使用更具體的選擇器或可怕的!important語句，您將被束之高閣！

Answer 4

您可以用逗號分隔單獨的選擇器，但只能用完整的選擇器逗號： #table1 tbody td a, #table2 tbody td a ...而不是(#table1, #table2, #table3) tbody td a 。

為什么不使用類呢？ 如果將同一CSS應用於多個表，則更容易，並且從可重用性的角度來看，當您決定需要在六個月內添加表4時，這將變得更加容易。

始終設計最終用途，而不是當前的用途。