css - 特定选择器的属性

Question

1。总结

1. 我有选择器列表，属性应始终应用于这些选择器。
2. 对于某些选择器必须额外添加其他属性。

我找不到，如何才能做到不重复。

---

2。 MCVE

2.1。预期的 CSS

.KiraFirst,
.KiraSecond,
.KiraThird {
  color: red;
}
.KiraSecond {
  background-color: yellow;
}

例如，我使用类 .KiraSecond 2 次。如果没有这个副本，我能否获得预期的行为？

2.2。手写笔

• > Live demo on stylus-lang.com

.KiraFirst
.KiraSecond
.KiraThird
    color red

.KiraSecond
    background-color yellow

这是编译成预期的 CSS，但我仍然使用 .KiraSecond 2 次。

我不明白，我怎么不能使用duplicate。例如，这样的语法无法编译为预期的 CSS:

.KiraFirst
.KiraSecond
    background-color yellow
.KiraThird
    color red

结果:

.KiraFirst,
.KiraSecond {
  background-color: #ff0;
}
.KiraThird {
  color: #f00;
}

---

3。没有帮助

1. > Stylus official documentation包括 Selectors section
2. > Stack Overflow Stylus questions
3. > Stylus GitHub issues

Answer 1

也许您可以为所有元素使用基本类？例如 - .Kira，如果您需要为其他元素指定一些内容，您可以添加额外的类 .KiraSecond 或使用 .Kira:nth-child(2)

在你的例子中它可以是这样的

.Kira {
  color: red;
}
.KiraSecond {
  background-color: yellow;
}

或

.Kira {
  color: red;
}
.Kira:nth-child(2) {
 background-color: yellow;
}