css - 在一个复杂选择器中选择两个类

Question

给定两个又长又复杂的选择器，例如

.question-number td:first-child > span[...]
.question-text td:first-child > span[...]

有没有办法将两者合并，使得长后缀不需要重复？类似的东西(尽管这不是有效的 CSS)

(.question-number | .question-text) td:first-child > span[...]

Answer 1

如果你只有那两个包含单词question的类，你可以考虑attribute selector如下所示:

[class*=question] td:first-child>span {
  color: red;
}

<table>
  <tr class="anoher-class">
    <td><span>some text</span></td>
  </tr>
  <tr class="question-number">
    <td><span>some text</span></td>
  </tr>
  <tr>
    <td><span>some text</span></td>
  </tr>
  <tr class="question-text">
    <td><span>some text</span></td>
  </tr>
</table>