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评估的方式,因为它从右到左.在你给的情况下:

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

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

因此,如果您的关注是通过td元素的迭代,那么您的关注是无效的.您的代码是高效的.