#CSS 的选择器

h1 {
    color: red;
}

p {
    color: blue;
}

/* 卡片 */
.card {
    /* 颜色 */
    color: #fafafa;
    background-color: #212121;

    /* 内边距 */
    padding: 1rem;
}

/* 卡片标题 */
.card-title {
    font-size: 2rem;    /* 字体大小 */
    font-weight: bold;  /* 加粗 */
}

<div class='card'>
    <cite class='card-title'>《爱丽丝梦游仙境》</cite>
    <blockquote class='card-content'>
        一天，闷闷不乐的爱丽丝跟姐姐同坐于河畔。忽见一只古怪的白兔走过──它穿戴打扮，手持怀表，自言自语，行色匆匆。
        好奇的爱丽丝跟着它跑，跳进兔子洞里去。这个洞非常非常深，过了很久，爱丽丝终于着地。她惊觉自己身处奇怪的大厅，四周尽是大大小小的门，而所有门都被上了锁。
        她捡到一条门匙，却仅能开启一道小门。由于这道门实在太小了，她只能望过去，却发现那边有个标致的花园。
        她把门匙放在桌上，并在大厅别处找到一瓶写着<q>喝我</q>的饮料。
        爱丽丝不由分说把它喝完，发现自己缩小了，当能穿过小门，却拿不回桌上的门匙。
        慌乱之际，她捡到一件写着<q>吃我</q>的蛋糕。这一次，爱丽丝吃掉它后竟又急速变大，大得连头顶也贴著天花板了。 
    </blockquote>
</div>

/* 导航 */
#navigation {
    /* 颜色 */
    color: #fafafa;
    background-color: #212121;

    /* 内边距 */
    padding: 1rem;
}

/* 图标 */
#logo {
    margin: 0 8px;
}

/* 标题 */
#title {
    font-size: 2rem;    /* 字体大小 */
    font-weight: bold;  /* 加粗 */
}

<div id='navigation'>
    <img id='logo' src="https://xplanc.org/primers/icon.svg" alt="图标" width="32px" height="32px"/>
    <span id='title'>Primers</span>
</div>

h1, h2, h3, h4, h5, h6 {
    color: red;
}

/* 等价于 */

h1 {
    color: red;
}

h2 {
    color: red;
}

h3 {
    color: red;
}

h4 {
    color: red;
}

h5 {
    color: red;
}

h6 {
    color: red;
}