是否有另一种方法来选择CSS中的这些节点

Question

如何选择我在下图中标记的节点

那是我的书写方式，我想知道是否还有另一种方法

.m1 > div, .m2 > div, .m3 > div, .m4 > div{}

Answer 1

div[class^="m"] > div {
    background: #ffff00;
}

<div class="m1">
  <div>text</div>
</div>
<div class="m2">
  <div>text</div>
</div>
<div class="m3">
  <div>text</div>
</div>
<div class="m4">
  <div>text</div>
</div>

对于以'm'开头的类，您可以使用通用选择器...如下所示，

div[class^="m"] > div {
    background: #ffff00;
}

您还可以选择任何包含常见单词/字符的类，如下所示：

div[class*="m"] > div {
    background: #ffff00;
}

Answer 2

为所有div提供通用类，例如我已经完成的示例代码

.m>div {
  color: red;
}

<div class="m1 m">
  <div>text</div>
</div>
<div class="m2 m">
  <div>text</div>
</div>
<div class="m3 m">
  <div>text</div>
</div>
<div class="m4 m">
  <div>text</div>
</div>