Question

我正在尝试定位一个可能有多个类之一的元素。是不是有更简单的方法来编写以下示例？我一直无法找到参考，但似乎应该有一个更有效的选择。

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

Answer 1

尝试 -

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

Answer 2

如果你在谈论计算效率（即浏览器性能），那么我建议坚持你已有的。否则...

如果您知道class属性始终以子字符串myTable开头，则可以使用属性选择器：

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

如果你不能保证你需要一些更复杂的东西：

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

提供解释here。如果你发现这个语法是神秘的，那么我会再次建议你已经拥有它，因为它是最简单的。

或者，修改您的HTML以包含您可以选择的公共类。这样您就可以更加简化CSS了。

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;
}

CSS目标可以包含许多类之一的元素

4 个答案: