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