Stylus 是一种灵活且功能强大的 CSS 预处理器，它提供了许多增强的特性来简化样式表的编写。其中一个重要方面是它的选择器系统，它允许你以更简洁、更直观的方式编写样式规则。
简单选择器
Stylus 支持所有标准的 CSS 选择器，包括元素选择器、类选择器、ID 选择器等。这些选择器的语法与 CSS 完全一致，因此对于熟悉 CSS 的开发者来说非常容易上手。
-- -------------------- ---- ------- -- ----- -- - ------ ---- -- ---- -- ---- ----------------- ---- -- -- --- -- ------- ---------- -----展开代码
组合选择器
除了单独使用选择器外，Stylus 也支持 CSS 中的所有组合选择器，如并列选择器、后代选择器、子代选择器和相邻兄弟选择器等。
-- -------------------- ---- ------- -- ----- -- --- --- -- -------------- --- -- ----- -- --- - ---------------- ---- -- ----- -- -- - -- ---------------- ---- -- ------- -- -- - - ------------ ----展开代码
属性选择器
Stylus 支持 CSS3 中引入的属性选择器，可以用来选择具有特定属性或属性值的元素。
-- -------------------- ---- ------- -- ------- -- ----------- ------- --- ----- ---- -- ------ -- ------------------ -------- ---- -- ---------- -- ----------------------- ----------------- -------展开代码
伪类和伪元素
Stylus 也支持 CSS 中的伪类和伪元素选择器，这为更复杂的选择器提供了可能，使样式表更具灵活性。
伪类
/* 伪类：hover */ a:hover color: #ff0000 /* 伪类：nth-child */ li:nth-child(odd) background-color: #eee
伪元素
/* 伪元素：::before */ p::before content: "注意: " color: #c00 /* 伪元素：::after */ p::after content: " - 注意事项"
嵌套选择器
Stylus 提供了一种嵌套选择器的功能，允许你将相关联的选择器放在一个块中，从而减少代码冗余，提高可读性。
nav ul li a padding: .5em &:hover color: #fff
混合选择器
混合选择器允许你在多个选择器之间共享相同的样式，从而避免重复代码。通过 & 符号可以引用当前选择器。
-- -------------------- ---- ------- ---- -------- ---- --- -------------- --- --------- ----------------- ------- ----------- ----------------- -------展开代码
以上就是 Stylus 中选择器的基本用法。选择器是编写有效和可维护样式的关键，熟练掌握它们将大大提高你的工作效率。接下来，我们将探索 Stylus 的变量和其他重要特性。
