html - 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 标签 3 次。如果这是真的，我怎样才能让浏览器搜索一次 td 标签，然后找到类匹配项。

但这不是 css 的评估方式，因为它是从 right 到 left。如果您给出：

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

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

因此，如果您关注的是元素的迭代td，那么您的关注是无效的。你的代码是高效的。

Answer 2

For specific properties, you can create separate classes. For example, in your case, you can make a class .color and write like this:

<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

You can use the :nth-child property to achieve the same without giving all these different classes to your TDs

i.e:

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