jquery - 针对相同的 child ，但只针对某些不同的 parent ——CSS 和 jQuery 选择器样式

Question

有没有一种方法可以只定位选定父项的某些子项，而不会复制子项选择器并使选择器的长度超出图表？

比如我想选中某个div的first-child paragraph

CSS 就像

.funny > p:first-child, .sad > p:first-child {
 color: red
}

标记

<div class="funny">
  <p>This is red</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

<div class="wildcrazy">
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

<div class="sad">
  <p>This is red</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

显然，除了我确实想要定位的有趣和悲伤之外，许多其他 div 中可能还有许多其他第一段，而且我 也可能有许多其他 div，例如 wildcrazy < em>不想成为目标。

我的问题是:我能知道如何声明 child 并将其添加到所有 parent 的前面吗？像这样的东西:

.funny、.sad、.another_div_class0、.another_div_class1、.another_div_class2、.another_div_class3 > p:first-child

代替

.funny p:first, .sad p:first-child, .another_div_class0 p:first-child, .another_div_class1 p:first-child, .another_div_class2 p:first-child, .another_div_class3 p:first- child

Answer 1

在 jquery 中:

.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3 > p:first

会翻译成这样:

$('.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3').children('p:first')