Question

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

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

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

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

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

我有几行以相同的选择器（form.request）开头，我想选择不同的孩子。我可以在没有重复的情况下以更整洁的方式做到这一点（并且最好没有像LESS那样的额外依赖性）吗？

相关问题 - 如果以上所有评论都包含相同的样式，我可以做得比：

更好

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

Answer 1

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

Answer 2

使用LESS，可以让你写

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

甚至

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

我可以简化这个CSS以避免重复父选择器吗？

2 个答案: