105 lines
4.0 KiB
Markdown
105 lines
4.0 KiB
Markdown
|
---
|
|||
|
|
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选择和设置特定元素时，请记住这一点。
|
|||
|
|
|
|||
|
|
这样，您就可以在工具箱中添加更多工具，以便在网页上设置样式元素。
|