css后代选择器:nth_CSS选择器：特异性

css后代选择器:nth

The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下是Tiffany B. Brown所著《 CSS Master》一书的摘录。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

Think of specificity as a score or rank that determines which style declarations are ultimately applied to an element. The universal selector (*) has low specificity. ID selectors are highly specific. Descendant selectors such as p img and child selectors such as .panel > h2 are more specific than type selectors such as p, img, or h1.

将特异性视为得分或等级，该得分或等级确定最终将哪些样式声明应用于元素。 通用选择器( * )具有较低的特异性。 ID选择器非常具体。 后代选择器(例如p img和子选择器(例如.panel > h2比类型选择器(例如p ， img或h1更具体。

Calculating exact specificity values seems tricky at first. As explained in Selectors Level 3, you need to:

首先，计算确切的特异性值似乎很棘手。 如选择器级别3中所述，您需要：

• count the number of ID selectors in the selector (= A)

  计算选择器中ID选择器的数量(= A)

• count the number of class selectors, attribute selectors, and pseudo-classes in the selector (= B)

  计算选择器中的类选择器，属性选择器和伪类的数量(= B)

• count the number of type selectors and pseudo-elements in the selector (= C)

  计算选择器中类型选择器和伪元素的数量(= C)

• ignore the universal selector

  忽略通用选择器

These A, B, and C values are then combined to form a final specificity value. An ID selector such as #foo has a specificity of 1,0,0. Attribute selectors, such as [type=email] and class selectors such as .chart have a specificity of 0,1,0. Adding a pseudo-class such as :first-child (for example, .chart:first-child) gives us a specificity of 0,2,0. But using a simple type or element selector such as h1 or p only gives us a specificity of 0,0,1.

然后将这些A，B和C值合并以形成最终的特异性值。 ID选择器(例如#foo )的特异性为1,0,0。 属性选择器(例如[type=email]和类选择器(例如.chart的特异性为0,1,0。 添加一个伪类，如:first-child (例如.chart:first-child )，可以得到0,2,0的特异性。 但是使用简单的类型或元素选择器(例如h1或p只会给我们带来0,0,1的特异性。

注意：计算特异性 (Note: Calculating Specificity)

Keegan Street’s Specificity Calculator and Joshua Peek’s CSS Explain are helpful for learning about and calculating selector specificity.

Keegan Street的特异性计算器和Joshua Peek的CSS Explain有助于学习和计算选择器特异性。

Complex and combinator selectors, of course, give us higher specificity values. Let’s look at an example. Consider the following CSS:

当然，复杂选择器和组合选择器为我们提供了更高的特异性值。 让我们来看一个例子。 考虑以下CSS：

ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}

These two rule sets are similar, but they are not the same. The first selector, ul#story-list > .bookreview, contains a type selector (ul), an ID selector, (#story-list), and a class selector (.bookreview). It has a specificity value of 1,1,1. The second selector, #story-list > .book-review only contains an ID and a class selector. Its specificity value is 1,1,0. Even though our #story-list > .book-review rule succeeds ul#story-list > .bookreview, the higher specificity of the former means that those elements with a .book-review class will be green rather than orange.

这两个规则集相似，但是不相同。 第一个选择器ul#story-list > .bookreview包含类型选择器( ul )，ID选择器( #story-list )和类选择器( .bookreview )。 其特异性值为1,1,1。 第二个选择器#story-list > .book-review仅包含一个ID和一个类选择器。 其特异性值为1,1,0。 即使我们的#story-list > .book-review规则继承ul#story-list > .bookreview ，但前者的较高特异性意味着具有.book-review类的那些元素将是绿色而不是橙色。

Pseudo-classes such as :link or :invalid have the same level of specificity as class selectors. Both a:link and a.external have a specificity value of 0,1,1. Similarly, pseudo-elements such as ::before and ::after are as specific as type or element selectors. In cases where two selectors are equally specific, the cascade kicks in. Here’s an example:

诸如:link或:invalid类的伪类具有与类选择器相同的特异性。 a:link和a.external的特异性值均为0,1,1。 同样，伪元素(例如::before和::after与类型或元素选择器一样具体。 如果两个选择器是同样特定的，则级联开始。这是一个示例：

a:link {
    color: #369;
}
a.external {
    color: #f60;
}

If we applied this CSS, every link would be slate blue except for those with class="external" applied. Those links would be orange instead.

如果我们应用此CSS，则除应用class="external"链接外，每个链接都将变成蓝色。 这些链接将改为橙色。

Keeping specificity low helps prevent selector creep, or the tendency for selector specificity and length to increase over time. This often happens as you add new developers to a team, or new forms of content to a website. Selector creep also contributes to long-term maintenance headaches. You either end up using more specific selectors to override other rule sets, or needing to refactor your code. Longer selectors also increase the weight of your CSS files.

保持较低的特异性有助于防止选择器蠕变 ，或防止选择器特异性和长度随时间增加的趋势。 这通常是在您将新开发人员添加到团队中或将新内容形式添加到网站时发生的。 选择器的蠕变也会导致长期的维护头痛。 您要么最终使用更特定的选择器来覆盖其他规则集，要么需要重构代码。 较长的选择器还会增加CSS文件的权重。

We discuss strategies for keeping specificity low in Chapter 2.

我们将在第2章中讨论降低特异性的策略。

结论 (Conclusion)

After reading this chapter, you should have a good understanding of CSS selectors. Specifically, you should now know how to:

阅读本章后，您应该对CSS选择器有很好的了解。 具体来说，您现在应该知道如何：

• use selectors to apply CSS to particular elements, pseudo-elements, and pseudo-classes

  使用选择器将CSS应用于特定元素，伪元素和伪类

• understand the difference between pseudo-elements and pseudo-classes

  了解伪元素和伪类之间的区别

• employ newer pseudo-classes introduced by the Selectors Level 3 and 4 specifications

  使用选择器级别3和4规范引入的更新的伪类

• calculate specificity

  计算特异性

In the next chapter, we’ll address some golden rules for writing maintainable, scalable CSS.

在下一章中，我们将讨论编写可维护的，可伸缩CSS的一些黄金法则。

翻译自: https://www.sitepoint.com/css-selectors-specificity/

css后代选择器:nth