我可以让这个 CSS 更简单以避免重复父选择器吗？答案

【问题标题】：Can I make this CSS simpler to avoid repeating the parent selector?我可以让这个 CSS 更简单以避免重复父选择器吗？
【发布时间】：2011-08-11 13:56:18
【问题描述】：

我遇到的一个常见模式如下：

form.request input {
    /* ... */
}

form.request input[type="text"] {
    /* ... */
}

form.request select {
    /* ... */
}

form.request br {
    /* ... */
}

我有几行以相同的选择器 (form.request) 开头，我想选择不同的子项。我可以以更简洁的方式做到这一点而无需重复（最好没有像 LESS 这样的额外依赖项）？

相关问题 - 如果上述所有 cmets 都包含相同的样式，我能做得更好吗：

form.request input, form.request input[type="text"], form.request select, form.request br {
    /* ... */
}

【问题讨论】：

这种问题被问死了——同样的答案是否定的。
当然.../* less complex */.
@BoltClock 我找不到完全相同的副本，如果有，很高兴关闭。

标签： css css-selectors dry

【解决方案1】：

不，你不能。但是，如果您想减少打字并让样式表更具可读性，请考虑使用SCSS。

【讨论】：

【解决方案2】：

使用LESS，这样你就可以写了

form.request {
  input { /* ... */ }
  input[type="text"] { /* ... */ }
  select { /* ... */ }
  br { /* ... */ }
}

甚至

form.request {
  input {
    /* ... */
    &[type="text"] { /* ... */ }
  }
  select { /* ... */ }
  br { /* ... */ }
}

【讨论】：