特定选择器的属性

Question

1。摘要

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

我找不到，如何做到没有重复。

---

2。 MCVE

2.1。预期的CSS

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

例如，我使用.KiraSecond类两次。如果没有此重复项，是否可以得到预期的行为？

2.2。触控笔

• 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

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

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

例如：

.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;
}