特定选择器的属性

Question

1.总结

1. 我有选择器列表，应始终应用属性。
2. 对于某些选择器，必须另外添加另一个属性。

我找不到，如何在没有重复的情况下做到这一点。

---

2. MCVE

2.1. Expected CSS

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

在示例中，我使用类.KiraSecond 2次。没有这个副本，我能获得预期的行为吗？

2.2. Stylus

• Live demo on stylus-lang.com

.KiraFirst
.KiraSecond
.KiraThird
    color red

.KiraSecond
    background-color yellow

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

我不明白，我怎么不能使用重复。例如，语法因为这不能编译到预期的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;
}

Answer 2

你（不能）？你不应该。在这种情况下复制该选择器并不是一个坏习惯。

• 您没有为许多类复制相同的属性/值
• 你可以清楚地覆盖特定的财产
• 您可以清楚地修改/更改特定班级的行为

e.g：

.class1, .class2, .class3 {
  color: red;
  background: yellow;
  border: 1px solid;
}

.class1:hover {
  color: blue;
}

.class2 {
  border: 2px dotted;
}

.class3 {
  color: pink;
}

在这种情况下会有什么不好的做法（没有选择器重复）

.class1 {
  color: blue;
  background: yellow;
  border: 1px solid;
}

.class2 {
  color: red;
  background: yellow;
  border: 2px dotted;
}

.class3 {
  color: pink;
  background: yellow;
  border: 1px solid;
}