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。这意味着它将找到所有三个类，然后评估标签。有没有办法让浏览器找到所有三个类，然后匹配标签而不是使用单个类。

- Jhankar Mahbub

Answer 1

解决您的疑虑

您说：

我的疑虑是：浏览器会查找每个逗号分隔符的所有td，并查找匹配的类。这意味着它将三次查找所有td标签。如果是这样，我该如何让浏览器仅搜索一次td标签，然后查找类匹配项。

但这不是CSS的评估方式因为它是从右到左。在您提供的情况下：

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

因此它不会在元素中搜索"三次"。相反，它将匹配您文档中的.first类（无论其在哪里），然后检查是否应用于元素，并进行匹配。然后以类似的方式评估.fourth等。因此，如果您担心遍历元素，则您的担忧是无效的。您的代码已经很有效率了。

- ScottS

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

- codingrose

---

我同意使用类会更快。有没有CSS的方法来定义选择器以查找元素类型下的多个类？ - Jhankar Mahbub

很好的解决方案，尽管我会尝试避免直接使用类名“purple”本身……如果你决定它们应该是不同的颜色，那么它就失去了意义:P - Terry

Answer 3

您可以使用:nth-child属性来实现相同的效果，而无需为TDs分配所有这些不同的类。

i.e:

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

- silicakes

---

我认为nth-child并不比class更好/更快。而且这种方法很脆弱，td的顺序可能会改变，我的样式也会混乱。 - Jhankar Mahbub

你说得很对。对于我的架构，我会选择@Hiral提供的方案。 - silicakes