第20话：家谱 - CSS 漫画大冒险

家族的关系

🧑‍🦱

Young David (少年大卫):
我们不仅能选“名字”，还能按“血缘关系”来选。

div > p { color: red; }

只选亲儿子，不选孙子。

h1 + p { color: blue; }

只选紧跟在后面的那个兄弟。

状态与次序 (Pseudo-classes)

用 : (冒号) 来描述状态。

li:nth-child(odd) { background: gray; } /* 奇数行 */
li:hover { transform: scale(1.1); }     /* 鼠标悬停 */

灵里的看见 (Pseudo-elements)

🧑‍🦱

Young David (少年大卫):
有些东西在 HTML 里没有写，但在 CSS 里可以创造出来。
这就是 ::before 和 ::after。

将来必有一位王从耶西的根而生

(前面的卷轴和后面的阿们，都是 CSS 变出来的！)