CSS針對一個可能具有多個類之一的元素

Question

我試圖針對可能具有多個類之一的元素。 是不是有一個更簡單的方法來寫下面的例子？我一直沒能找到一個參考，但似乎應該有一個更有效的選擇。

.myTable1 a, .myTable2 a, .myTable3 a, .myTable4 a 
{ 
    text-decoration: underline; 
} 

Answer 1

如果你正在談論計算效率（即瀏覽器性能），那麼我建議你堅持已有的東西。否則......

如果你知道class屬性總是與子myTable開始，你可以使用屬性選擇：

[class^="myTable"] a 
{ 
    text-decoration: underline; 
} 

如果你不能保證你需要的東西，就是多一點複合物：

[class^="myTable"] a, [class*=" myTable"] a 
{ 
    text-decoration: underline; 
} 

提供解釋here。如果你覺得這個語法有點神祕，那麼我會再次建議你用已有的東西去做，因爲它是最簡單的。

或者，修改您的HTML以包含您可以選擇的通用類。這可以讓你更容易地從你已有的CSS中簡化你的CSS。

Answer 2

嘗試 -

table[class^=myTable] a { 
    text-decoration: underline; 
} 

Answer 3

沒有，有沒有更簡單的純CSS方式。

但是，如果你的許多類都是類似的，你可以做這樣的模糊匹配，如*[class^="myTable"] { ... }。

Answer 4

您可以在需要下劃線鏈接的表中使用多個類。

HTML：

<table class="myTable1 ul_table">...</table> 
<table class="myTable2 ul_table">...</table> 
<table class="myTable3 ul_table">...</table> 
<table class="myTable4 ul_table">...</table> 

CSS：

.ul_table a { 
    text-decoration: underline; 
}