基本选择器
| 选择器 | 描述 | 查看 |
|---|---|---|
* |
通配符，选中所有元素 | |
tagName |
标签选择器，选中指定标签的元素 | 查看 |
.className |
类选择器，选中指定类名的元素 | 查看 |
#ID |
ID 选择器，选中指定 ID 的元素 | 查看 |
A, B, C |
选择器列表，选中多种元素 | 查看 |
标签选择器的写法为元素的标签名，例如 h1, p, table 等。
示例：
h1 {
color: red;
}
p {
color: blue;
}
类选择器的写法为一个 . 后跟元素的类型，例如 .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，例如 #navigation, #logo 等。
<!DOCTYPE html>
<html>
<head>
<title>类选择器</title>
<meta charset="utf-8"/>
<style>
/* 导航 */
#navigation {
/* 颜色 */
color: #fafafa;
background-color: #212121;
/* 内边距 */
padding: 1rem;
}
/* 图标 */
#logo {
margin: 0 8px;
}
/* 标题 */
#title {
font-size: 2rem; /* 字体大小 */
font-weight: bold; /* 加粗 */
}
</style>
</head>
<body>
<div id='navigation'>
<img id='logo' src="https://xplanc.org/primers//icon.svg" alt="图标" width="32px" height="32px"/>
<span id='title'>Primers</span>
</div>
</body>
</html>
/* 导航 */
#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;
}