4.0 KiB
| title | localeTitle |
|---|---|
| A Guide to Class and Id Selectors | 类和Id选择器指南 |
类和Id选择器指南
这是一篇基于CSS选择器的文章。 CSS通常用于样式化HTML元素和网页。要使CSS在页面上设置元素样式，需要首先选择该元素。
就像在删除计算机之前需要在计算机上选择文件一样。您需要准确地告诉您的机器您要修改或删除哪个文件。类似地，你需要告诉CSS在应用不同的样式和颜色时要定位哪个元素。
尽管CSS可以很好地选择元素，但您可以指示它选择非常具体的元素。在本文结束时，您将学习选择和设计特定元素的知识。
什么是课程和身份证？
假设您的HTML代码中有5个段落元素。
<p> First paragraph </p>
<p> Second paragraph </p>
<p> Third paragraph </p>
<p> Fourth paragraph </p>
<p> Fifth paragraph </p>
您可以使用CSS为每个人提供红色的字体颜色。
p {
color: red;
}
这很简单！但是如果你只想给第二段字体颜色呢？现在这有点困难。由于我们无法单独识别每个段落元素，因此我们无法单独选择它们。
救援的等级和ID
类和ID的行为类似于HTML元素的身份证。两者都有助于将一个元素与另一个元素分开但略有不同。
假设你遇到一个俱乐部的人。当你向那个人要求他们的俱乐部身份证时，他们会在上面显示一个带有俱乐部名字的人。现在同一个俱乐部的所有成员都拥有相同的身份证吗？
如果有3个俱乐部--A，B和C.那么俱乐部A的所有成员都将拥有相同的身份证。俱乐部B的所有成员也将拥有相同的成员，但他们将与俱乐部A和俱乐部C的身份证不同。这就是你怎么知道谁来自哪个俱乐部。
这就是class运作方式。你可以给一组课程提供一些元素，他们将在一个俱乐部。就像所有俱乐部成员必须遵循俱乐部的新规则一样，所有新风格规则都适用于同一俱乐部的元素。
<p class="bike"> Hayabusa </p>
<p class="car"> Chevrolet </p>
<p class="bike"> Hayley-Davidson </p>
<p class="car"> Lamborghini </p>
这里我们有4个段落。如果你看一下班级名称，就会有2个“俱乐部”。现在我们可以选择我们想要的俱乐部（或团体）并应用我们想要的样式。
.bike {
color: blue;
}
您可以通过在组名称前加上句点来选择组而不是特定元素.并将所需的样式应用于该组。在此示例中，蓝色的字体颜色仅应用于具有bike类的段落。
如果您了解哪个class ，那么ID将很容易理解。
从我们之前的例子中，俱乐部身份证代表俱乐部，所有成员都拥有它。但是，如果您要求提供个人身份证明，则一个人会出示一张只有他们身份证明的身份证。每个人都有不同的，可以用来单独识别它们。
这就是ID。就像个人身份证一样，只有一个HTML元素可以拥有特定的id 。没有两个元素具有相同的id 。
<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名称来选择特定元素并将样式应用于该元素。
#hayabusa {
font-style: bold;
}
这很容易记住 - 使用.在_class_的名称和_id_之前的#之前。
两者都有自己的用途。
当要在多个元素上应用样式时使用class，并且在要在特定元素上应用样式时使用id。
使用class和id选择和设置特定元素时，请记住这一点。
这样，您就可以在工具箱中添加更多工具，以便在网页上设置样式元素。