#CSS 的选择器

基本选择器

#标签选择器

标签选择器的写法为元素的标签名，例如 h1, p, table 等。

示例：

h1 {
    color: red;
}

p {
    color: blue;
}

标签选择器

        
Heading 1
        
Paragraph
    

#类选择器

类选择器的写法为一个 . 后跟元素的类型，例如 .card, .button 等。

示例：

类选择器

        

            《爱丽丝梦游仙境》
            

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

/* 卡片 */
.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>

#ID 选择器

ID 选择器的写法为一个 # 后跟元素的 ID，例如 #navigation, #logo 等。

ID 选择器

        

            
            Primers
        
    

/* 导航 */
#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;
}