css 选择器将规则应用于多个类的相似元素

Question

我有一张简单的桌子

<tr>
     <td class="first">I am the first</td>
     <td class="second">You are the second</td>
     <td class="third">He is third</td>
     <td class="fourth">Someone else is fourth</td>
     <td class="fifth">That guy is fifht</td>
     <td class="sixth">Who care's about sixth</td>
</tr>

我只想对 td 中的某些类应用 css 规则。我可以写一些类似的东西-

td.first, td.fourth, td.fifth
{
    color:purple;
}

这行得通。或者我可以使用课程。我想知道在这种情况下是否有任何有效/更好的方法来编写选择器。

我的担心： 是浏览器，将查找所有类，然后为每个逗号分隔搜索 td。这意味着它将找到所有三个类，然后评估标签。除了使用单个类之外，浏览器有什么方法可以找到所有三个类然后匹配标签。

Answer 1

解决您的问题

你说：

我关心的是：浏览器是否会为每个逗号查找所有 td 分离并找到类匹配。这意味着它将找到所有 td 标签三次。如果这是真的，我怎样才能让浏览器搜索 为 td 标记一次，然后查找类匹配项。

但这不是 css 评估的方式，as it goes from right to left。在你给的情况下：

td.first, td.fourth, td.fifth
{
    color:purple;
}

所以它不会通过td 元素搜索“三次”。相反，它将匹配文档中的.first 类（无论它在哪里），然后检查它是否应用于td 元素，如果是，则匹配。然后以类似的方式评估.fourth等。

因此，如果您关心的是通过 td 元素进行迭代，那么您的担忧是无效的。你的代码是高效的。

Answer 2

对于特定属性，您可以创建单独的类。 例如，在您的情况下，您可以创建一个类 .color 并这样写：

<tr>
     <td class="first color">I am the first</td>
     <td class="second">You are the second</td>
     <td class="third">He is third</td>
     <td class="fourth color">Someone else is fourth</td>
     <td class="fifth color">That guy is fifht</td>
     <td class="sixth">Who care's about sixth</td>
</tr>

.color{color:purple;}

Answer 3

您可以使用:nth-child 属性来实现相同的目的，而无需将所有这些不同的类都分配给您的 TD

即：

td:nth-child(1), 
td:nth-child(4), 
td:nth-child(5) {
    color:purple;
}