在今天的Web上构建网站需要深入了解CSS（层叠样式表）。这些是您为网站提供的说明，以确定它在浏览器窗口中的布局方式。您将一系列“样式”应用于HTML文档，这将创建网页的外观。
有许多方法可以在文档中应用上述样式，但通常只想使用样式 一些 文档中的元素，但不是该元素的所有实例。您可能还希望创建可应用于文档中多个元素的样式，而不必为每个单独的实例重复样式规则。要实现这些所需的样式，您将使用类和ID HTML属性。这些属性是可以应用于几乎每个HTML标记的全局属性。这意味着无论您是在文档中设置分区，段落，链接，列表还是任何其他HTML，您都可以转向类和ID属性来帮助您完成此任务！
类选择器
类选择器允许您将多个样式设置为文档中的相同元素或标记。例如，您可能希望以与文档中其余文本不同的颜色调出文本的某些部分。这些突出显示的部分可能是您在页面上设置的“警报”。您可以使用以下类分配段落：
p {color：＃0000ff; } p.alert {color：#ff0000; } 这些样式将设置颜色 所有 段落为蓝色（＃0000ff），但任何类属性为“alert”的段落将改为红色样式（＃ff0000）。这是因为class属性比第一个CSS规则具有更高的特异性，后者仅使用标记选择器。使用CSS时，更具体的规则将覆盖不太具体的规则。因此，在此示例中，更一般的规则设置所有段落的颜色，但第二个更具体的规则，而不是覆盖仅在某些段落中设置的规则。 以下是在一些HTML标记中如何使用它： 此段将以蓝色显示，这是页面的默认值。
这一段也是蓝色的。
此段落将显示为红色，因为类属性将覆盖元素选择器样式中的标准蓝色。
在该示例中，“p.alert”的样式仅适用于使用该“alert”类的段落元素。如果你想在多个HTML元素中使用该类，你只需从样式调用的开头删除HTML元素（只需确保离开句点（ .）就地），像这样： .alert {background-color：＃ff0000;} 此类现在可用于任何需要它的元素。任何具有类属性值“alert”的HTML片段现在都将获得此样式。在下面的HTML中，我们有一个使用“alert”类的段落和标题级别2。根据我们刚刚展示的CSS，这两种颜色都有红色的背景颜色。
本段将以红色书写。
在今天的网站上，类属性通常用于大多数元素，因为从ID的特定角度来看它们更容易使用。您将发现大多数当前HTML页面都要填充类属性，其中一些在文档中重复多次，而其他一些只能出现一次。 ID选择器允许您为特定样式指定名称，而无需将其与标记或其他HTML元素相关联。假设您的HTML标记中包含一个包含事件信息的分区。你可以给这个分区一个“事件”的ID属性，然后如果你想要用1像素宽的黑色边框来勾勒那个分区，你可以写一个这样的ID代码： #event {border：1px solid＃000; } ID选择器面临的挑战是它们不能在HTML文档中重复。它们必须是唯一的（您可以在网站的多个页面上使用相同的ID，但在每个单独的HTML文档中只能使用一次）。因此，如果您有3个事件都需要此边框，则需要为它们提供“event1”，“event2”和“event3”的ID属性，并为每个事件设置样式。因此，使用前面提到的“事件”类属性会更加容易，并且可以一次性地设置它们。 ID属性的另一个挑战是它们具有比类属性更高的特异性。这意味着如果您需要使用CSS来覆盖以前建立的样式，那么如果您过分依赖ID，则可能很难这样做。正是出于这个原因，许多Web开发人员已经不再在他们的标记中使用ID，即使他们只打算使用该值一次，而是转向几乎所有样式的不太具体的类属性。 ID属性发挥作用的一个区域是您要创建具有页内锚链接的页面。例如，如果您有一个视差式网站，其中包含单个页面上的所有内容，其中的链接会“跳转”到该页面的各个部分。这是使用ID属性和使用这些锚链接的文本链接完成的。您只需将该属性的值（前面带有“＃”符号）添加到链接的“href”属性，如下所示： 这是链接 单击或触摸时，此链接将跳转到具有此ID属性的页面部分。如果页面上没有元素使用此ID值，则链接将不执行任何操作。 请记住，如果要在站点上创建页内链接，则需要使用ID属性，但您仍可以转到类以用于一般CSS样式目的。这就是我们今天标记页面的方式 - 我们尽可能地使用类选择器，并且当我们需要该属性不仅作为CSS的钩子而且作为页内链接时，仅转向ID。这个h2也会变红。
ID选择器
ID属性的复杂性
