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