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

青旅半醒 2022-12-03 09:55 229阅读 0赞

css后代选择器:nth

![cssmasterthumb][]

*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][CSS Master].*

*以下是Tiffany B. Brown所著《 [CSS Master》][CSS Master]一书的摘录。* *副本在世界各地的商店中都有出售，或者您可以[在此处以电子书形式购买][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,][Selectors Level 3] you need to:

首先，计算确切的特异性值似乎很棘手。 如[选择器级别3中所述，][Selectors Level 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的[特异性计算器][Specificity Calculator]和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/][https_www.sitepoint.com_css-selectors-specificity]

css后代选择器:nth

[cssmasterthumb]: /images/20221123/784e9ff0fe834cdc9ee85cd7c8e32f89.png
[CSS Master]: https://www.sitepoint.com/premium/books/css-master
[Selectors Level 3]: http://dev.w3.org/csswg/selectors-3/#specificity
[Specificity Calculator]: http://specificity.keegan.st/
[CSS Explain]: http://josh.github.io/css-explain/
[https_www.sitepoint.com_css-selectors-specificity]: https://www.sitepoint.com/css-selectors-specificity/