AtoZ CSS截屏视频：ID选择器

朴灿烈づ我的快乐病毒、 2022-12-03 09:56 154阅读 0赞

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series [here][].

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在[此处][here]找到该系列的其他条目。

## 成绩单 **(**Transcript**)** ##

ID is a CSS selector that allows the styling of a single unique element.

ID是一个CSS选择器，允许对单个唯一元素进行样式设置。

Its use in CSS is common and often a little controversial.

它在CSS中的用法很常见，并且经常引起争议。

I personally avoid IDs for styling things in CSS, but I’m not going to force my personal preferences on you.

我个人避免使用ID来样式化CSS中的样式，但是我不会强加您的个人喜好。

In this video, I will outline some of the reasons why I prefer the `class` selector over `id`, how CSS specificity works and some tips for writing more modular and reusable code.

在此视频中，我将概述为什么我偏爱`class`选择器而不是`id`一些原因，CSS的工作原理以及编写更多模块化和可重用代码的一些技巧。

### 句法 **(**Syntax**)** ###

Let’s start with the basics and look at how ID can be used to select an element in CSS.

让我们从基础开始，看看如何使用ID选择CSS中的元素。

Given this series of `<div>`s, if I wanted the third one to be a feature box, I could add an `id` attribute to the HTML as follows. This is a unique identifier, a bit like your passport number or social security number and there can be only one with this value on any given page.

给定这一系列`<div>` ，如果我希望第三个成为功能框，则可以如下向HTML添加`id`属性。 这是一个唯一标识符，有点像您的护照号码或社会保险号，并且在任何给定页面上只能有一个具有此值的标识符。

<div>lorem ipsum</div> 
    <div>lorem ipsum</div> 
    <div id="feature-box" class="box">lorem ipsum</div> 
    <div>lorem ipsum</div>

With the `id` attribute added in the markup, this can be selected in CSS using the hash symbol which outside of the UK is sometimes called the pound sign.

在标记中添加了`id`属性后，就可以在CSS中使用井号将其选中，在英国以外的井号有时也称为井号。

#feature-box {
      /* styles */
    }

Now we know how to use the ID selector, let’s look at why I don’t use them.

现在我们知道了如何使用ID选择器，让我们看看为什么我不使用它们。

### ID的麻烦 **(**The trouble with IDs**)** ###

I’ll outline two key reasons why I avoid using the ID selector in CSS:

我将概述避免在CSS中使用ID选择器的两个关键原因：

*  They are single use
    
    它们是一次性的
 *  They introduce specificity issues
    
    他们介绍了特异性问题

### 一次性使用 **(**Single Use**)** ###

One of CSS’s strongest weapons is the class selector which allows you to style multiple things, multiple times with a single block of code.

类选择器是CSS最强大的武器之一，它使您可以使用单个代码块对多种内容进行样式设置。

I often use a class of “box” in the code demos of this tutorial series to apply generic text styling and color to the elements on the screen, so you can see what’s going on. I can re-use this class as many times as I need and can apply it to a whole host of different elements. The class selector doesn’t care what element you put it on.

我经常在本教程系列的代码演示中使用“框”类将通用的文本样式和颜色应用于屏幕上的元素，以便您了解发生了什么。 我可以根据需要多次重复使用该类，并将其应用于大量不同的元素。 类选择器不在乎您将其放在什么元素上。

If I had `<div id="box"></div>` I could only use this once. If i’ve gone to the trouble of tapping out a whole load of CSS, I at least want the option of using it again.

如果我有`<div id="box"></div>` ，则只能使用一次。 如果我要花掉全部CSS的麻烦，我至少希望再次使用它。

Thinking in reusable blocks can also help you break down lots of CSS into smaller chunks that have more likelihood of being reused.

考虑可重用的块还可以帮助您将大量CSS分解为较小的块，从而更有可能被重用。

To make your code more modular, consider breaking things down into separate classes for structure and look.

为了使您的代码更具模块化，请考虑将其分解为单独的类以进行结构和外观设计。

We could have a reusable button component with the following structural styles:

我们可以使用具有以下结构样式的可重用按钮组件：

.button {
      display: inline-block;
      margin: 1em 0;
      padding: 0.5em 1.5em;
      font-size: 1em;
      text-align: center;
    }

We could then create a series of modifier classes that allow us to create a range of different buttons for use throughout a project.

然后，我们可以创建一系列修饰符类，这些修饰符类使我们可以创建在整个项目中使用的一系列不同按钮。

.button-large {
      font-size: 2em;
    }
    .button-rounded {
      border-radius: 1em;
    }
    .button-confirm {
      color: #333;
      background: lightgreen;
      border: 1px solid darkgreen;
    }
    .button-cancel {
      color: #fff;
      background: crimson;
      border: 1px solid darkred;
    }

These modifier classes can then be added to the markup as needed to build the whole component up of many smaller pieces.

然后可以根据需要将这些修饰符类添加到标记中，以将许多较小的部分组成整个组件。

### 特异性 **(**Specificity**)** ###

Specificity determines what styles get applied and when.

特异性决定什么样式以及何时应用。

When writing CSS, things that come further down the stylesheet tend to override things that have been declared above them.

编写CSS时，样式表中最下方的内容倾向于覆盖在其上方声明的内容。

.box p {color: white;}
    .box p {color: black;}

The second set of styles override the first.

第二组样式将覆盖第一组样式。

What color text will the box have in this snippet?

此代码段中的框将显示什么颜色的文字？

#box p {color: white;}
    .box p {color: red;}

The text will be *white* because although the class selector comes after the ID selector, the ID is a more *powerful* selector.

文本将为*白色，*因为尽管类选择器位于ID选择器之后，但ID是更*强大的*选择器。

How about now?

现在怎么样？

#box p {color: white;}
    body h1 + div.box p {color: green;}

The text is still white. This is due to how specificity is actually calculated.

文字仍为白色。 这是由于实际上是如何计算特异性的。

### 计算特异性 **(**Calculating Specificity**)** ###

Take this horrifically complex selector – please never write anything like this.

选择这个令人难以置信的复杂选择器-切勿写这样的东西。

header ul#main-nav li .sub-menu li.child a:hover { }

This will style the hover states of any links in a sub-menu of a site’s main navigation. Yuck.

这将在站点的主导航子菜单中设置任何链接的悬停状态。 uck

To calculate the specificity of this selector – ie. what we would have to concoct to override these styles somewhere else in the stylesheet – we need to count all the style attributes, id selectors, classes and pseudo classes and elements to create a 4-figure number.

计算此选择器的特异性-即 我们需要炮制一下以覆盖样式表中其他位置的这些样式–我们需要计算所有样式属性，id选择器，类和伪类以及元素以创建4位数字。

There are no style attributes here. So the first number is 0.

这里没有样式属性。 所以第一个数字是0。

There is 1 ID for “main-nav” which must be on a `ul` for this selector to apply.

“ main-nav”有1个ID，必须在`ul`才能应用此选择器。

There are 2 classes, `.sub-menu` and `.child` and 1 pseudo class, `:hover` so the third number is 3.

有2 `.child`类`.sub-menu`和`.child`和1个伪类`:hover`因此第三个数字是3。

And finally, there are 5 elements; `header`, `ul`, `li`, `li` again and `a`.

最后，有5个元素； `header` ， `ul` ， `li` ， `li`又`a` 。

The specificity value for this selector is therefore

因此，此选择器的特异性值为

0, 1, 3, 5

In order to override these styles, we would need another selector with equal specificity to occur beneath this one in the stylesheet, or a selector with higher specificity to occur anywhere in the file.

为了覆盖这些样式，我们需要在样式表下的另一个同等选择器，或者在文件中任何地方都具有同等的选择器。

To avoid this madness, the above selector could almost certainly be re-written as

为了避免这种疯狂，上面的选择器几乎可以肯定地重写为

.sub-menu a:hover { }

And had the same visual result with a specificity of `0,0,2,1` which would be much easier to deal with if needing to be overwritten at a later stage.

并且具有相同的视觉结果，特异性为`0,0,2,1` ，如果以后需要重写，则将更容易处理。

I like to keep my specificity low and favor classes wherever possible; it reduces dependency on certain markup structure and allows things to be easily overwritten with another single class selector if needs be.

我喜欢保持低专一性，并尽可能支持班级。 它减少了对某些标记结构的依赖，并允许在需要时使用其他单个类选择器轻松覆盖内容。

This approach of avoiding `id` works for me, but your preference might differ. I’d encourage you to try this approach, but only as part of finding out what really works best for you and your team.

这种避免使用`id`方法对我有用，但是您的偏好可能有所不同。 我鼓励您尝试这种方法，但这只是在找出最适合您和您的团队的部分方法。

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

> 翻译自: [https://www.sitepoint.com/atoz-css-screencast-id-selector/][https_www.sitepoint.com_atoz-css-screencast-id-selector]

[here]: https://www.sitepoint.com/tag/atoz-css/
[https_www.sitepoint.com_atoz-css-screencast-id-selector]: https://www.sitepoint.com/atoz-css-screencast-id-selector/