---
title: A Guide to Class and Id Selectors
localeTitle: 类和Id选择器指南
---
## 类和Id选择器指南

这是一篇基于CSS选择器的文章。 CSS通常用于样式化HTML元素和网页。要使CSS在页面上设置元素样式，需要首先选择该元素。

就像在删除计算机之前需要在计算机上选择文件一样。您需要准确地告诉您的机器您要修改或删除哪个文件。类似地，你需要告诉CSS在应用不同的样式和颜色时要定位哪个元素。

尽管CSS可以很好地选择元素，但您可以指示它选择非常具体的元素。在本文结束时，您将学习选择和设计特定元素的知识。

### 什么是课程和身份证？

假设您的HTML代码中有5个段落元素。

```html

<p> First paragraph </p> 
 <p> Second paragraph </p> 
 <p> Third paragraph </p> 
 <p> Fourth paragraph </p> 
 <p> Fifth paragraph </p> 
```

您可以使用CSS为每个人提供红色的字体颜色。

```css
p { 
    color: red; 
 } 
```

这很简单！但是如果你只想给第二段字体颜色呢？现在这有点困难。由于我们无法单独识别每个段落元素，因此我们无法单独选择它们。

_救援的等级和ID_

类和ID的行为类似于HTML元素的身份证。两者都有助于将一个元素与另一个元素分开但略有不同。

* * *

假设你遇到一个俱乐部的人。当你向那个人要求他们的俱乐部身份证时，他们会在上面显示一个带有俱乐部名字的人。现在同一个俱乐部的所有成员都拥有相同的身份证吗？

如果有3个俱乐部--A，B和C.那么俱乐部A的所有成员都将拥有相同的身份证。俱乐部B的所有成员也将拥有相同的成员，但他们将与俱乐部A和俱乐部C的身份证不同。这就是你怎么知道谁来自哪个俱乐部。

这就是`class`运作方式。你可以给一组课程提供一些元素，他们将在一个俱乐部。就像所有俱乐部成员必须遵循俱乐部的新规则一样，所有新风格规则都适用于同一俱乐部的元素。

```html

<p class="bike"> Hayabusa </p> 
 <p class="car"> Chevrolet </p> 
 <p class="bike"> Hayley-Davidson </p> 
 <p class="car"> Lamborghini </p> 
```

这里我们有4个段落。如果你看一下班级名称，就会有2个“俱乐部”。现在我们可以选择我们想要的俱乐部（或团体）并应用我们想要的样式。

```css
.bike { 
    color: blue; 
 } 
```

您可以通过在组名称前加上句点来选择组而不是特定元素`.`并将所需的样式应用于该组。在此示例中，蓝色的字体颜色仅应用于具有`bike`类的段落。

* * *

如果您了解哪个`class` ，那么ID将很容易理解。

从我们之前的例子中，俱乐部身份证代表俱乐部，所有成员都拥有它。但是，如果您要求提供个人身份证明，则一个人会出示一张只有他们身份证明的身份证。每个人都有不同的，可以用来单独识别它们。

这就是ID。就像个人身份证一样，只有一个HTML元素可以拥有特定的`id` 。没有两个元素具有相同的`id` 。

```html

<p id="car"> Ferrari </p> 
 <p id="car"> Ford </p> 
 <!-- This is incorrect--> 
 
 <p id="harley"> Harley-Davidson </p> 
 <p id="hayabusa"> Hayabusa </p> 
 <!--This is correct since an id is only used once.--> 
```

`id`也可以类似于俱乐部内储物柜的私钥。俱乐部里的每个人都有相同的俱乐部身份证，但每个人的储物柜钥匙都是不同的，也是独一无二的。

与`class`示例类似，您可以通过在`#`前面添加id名称来选择特定元素并将样式应用于该元素。

```css
#hayabusa { 
    font-style: bold; 
 } 
```

* * *

这很容易记住 - 使用`.`在_class_的名称和_id_之前的`#`之前。

两者都有自己的用途。

> 当要在多个元素上应用样式时使用class，并且在要在特定元素上应用样式时使用id。

使用class和id选择和设置特定元素时，请记住这一点。

这样，您就可以在工具箱中添加更多工具，以便在网页上设置样式元素。