Html css 选择器将规则应用于多个类的相似元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19877362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css selectors to apply rules to multiple class of similar element
提问by Jhankar Mahbub
I have a simple table
我有一张简单的桌子
<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>
I want to apply css rules on some of classes in td only. I can write something like-
我只想在 td 中的某些类上应用 css 规则。我可以写一些像-
td.first, td.fourth, td.fifth
{
color:purple;
}
This works. Or i can use classes. I was wondering is there any efficient/ better way to write selectors in such case.
这有效。或者我可以使用类。我想知道在这种情况下是否有任何有效/更好的方法来编写选择器。
My concern: Is browser, is going to look for all class and then search for td for each comma separation. That means it going to find all three classes and then evaluate tag. Is there any way that browser will find all three classes and then matches the tag other than using a single class.
我的担忧：浏览器是否会查找所有类，然后为每个逗号分隔搜索 td。这意味着它将找到所有三个类，然后评估标签。浏览器有什么方法可以找到所有三个类，然后匹配标签而不是使用单个类。
回答by ScottS
Addressing Your Concern
解决您的顾虑
You state:
你说：
My concern: Is browser, is going to look for all td for each comma separation and find the class match. That means it going to find all td tags three times. If this is true, how can i make browser to search for td tags once and then find class matches.
我的担忧：浏览器是否会为每个逗号分隔查找所有 td 并找到类匹配。这意味着它将查找所有 td 标签 3 次。如果这是真的，我怎样才能让浏览器搜索 td 标签一次，然后找到类匹配。
But that is not how css evaluates, as it goes from right to left. In the case you give:
但这不是 css 评估的方式，因为它从 right 到 left。在你给的情况下：
td.first, td.fourth, td.fifth
{
color:purple;
}
So it will not search "three times" through tdelements. Rather, it will match the .firstclass in your document (where ever it is), then check to see if it is applied to tdelement, and if so, match. Then evaluate .fourth, etc. in a similar fashion.
所以它不会通过td元素搜索“三遍” 。相反，它将匹配.first您文档中的类（无论它在哪里），然后检查它是否应用于td元素，如果是，则匹配。然后.fourth以类似的方式评估等。
So if your concern is iterations through tdelements, then your concern is invalid. Your code is efficient as it is.
因此，如果您关注的是td元素的迭代，那么您的关注是无效的。您的代码是有效的。
回答by Hiral
For specific properties, you can create separate classes.
For example, in your case, you can make a class .colorand write like this:
对于特定属性，您可以创建单独的类。例如，在您的情况下，您可以创建一个类.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;}
回答by silicakes
You can use the :nth-childproperty to achieve the same without giving all these different classes to your TDs
您可以使用:nth-child属性来实现相同的效果，而无需为您的 TD 提供所有这些不同的类
i.e:
IE：
td:nth-child(1),
td:nth-child(4),
td:nth-child(5) {
color:purple;
}
