在 CSS 入门篇里,我们学会了如何使用 HTML 选择器。
这一篇继续讲解另外两种选择器 - class 和 ID,有了这两个选择器,我们就可以为同一类 HTML 标签指定不同的样式。
类选择器的名称以 .
开头,ID 选择器以 #
开头。
#top {
background-color: #ccc;
padding: 20px
}
.intro {
color: red;
font-weight: bold;
}
用法如下:
<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 作用于某个元素,而类 (class) 作用于某类元素。
这两种选择可以与 HTML 选择器配合使用,比如 p.jam { /* whatever */ }
,只作用于 class 为 jam
的 <p>
元素。