jquery - 针对相同的孩子，但只针对某些不同的父母——CSS和jQuery选择器样式

Question

有没有办法只针对选定父母的某些孩子而不复制孩子选择器并使选择器在长度方面超出图表？

例如，我想选择某些 div 的第一个子段落。

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 。

我的问题是：我可以如何声明孩子并将其与所有父母一起添加吗？就像是：

.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')

Answer 2

我不知道 CSS，但你可以用 jquery 来做。将您所有的父类放在一个选择器中，然后声明您只需要 ap 如果它是选择器的子类：

$('.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3').each( function() {
    $('p:first-child', this).css(Do whatever you want);
});

Answer 3

为什么不像这样向div您要选择的 's添加另一个类

<div class="funny selectthis">
  <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 selectthis">
  <p>This is red</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

然后就用这个

$('.selectthis').find('p:first').css('color','red');​

http://jsfiddle.net/U6qhb/

Answer 4

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