CSS进阶篇——类和ID选择器

Posted 2022-10-03 老梁写代码

在 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> 元素。