Class and ID Selectors

在 CSS 入门教程中，我们只看了 HTML 选择器——那些代表 HTML 标签的选择器。

您还可以定义自己的选择器，形式为类选择器和ID选择器。

这样做的好处是，您可以拥有相同的 HTML 元素，但根据其类或 ID 以不同的方式呈现它。

在 CSS 中，类选择器是前面带有圆点（“.”）的名称，而 ID 选择器是前面带有井号（“#”）的名称。

所以 CSS 可能看起来像这样


#top {
    background-color: #ccc;
    padding: 20px
}

.intro {
    color: red;
    font-weight: bold;
}

HTML 通过使用 id 和 class 属性来引用 CSS。它可能看起来像这样


<div id="top">

<h1>Chocolate curry</h1>

<p class="intro">This is my recipe for making curry purely with chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

ID 和类之间的区别在于，ID 可以用来标识一个元素，而类可以用来标识一个以上的元素。

您还可以通过简单地先声明 HTML 选择器来将选择器应用于特定的 HTML 元素，因此 p.jam { /* whatever */ } 将仅应用于具有类“jam”的段落元素。