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

Posted 2023-05-09

【中文标题】针对相同的孩子，但只针对某些不同的父母——CSS和jQuery选择器样式

【英文标题】：Targeting Same Children, but only Certain, Differing Parents -- CSS and jQuery Selector Style

【发布时间】：2012-07-31 19:01:33

【问题描述】：

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

例如，我想选择某些 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，例如我 不想定位。

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

.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

【问题讨论】：

不，你不能那样做。你必须定义所有有你想要影响的孩子的父母

是的，我想就是这样，Zoltan... 也不想使用 jQuery .has()。

你还应该避免在 jQuery 中使用子选择器——它会增加很多开销——这就是 jQuery 包含 .children()、.first() 和 .parent() 的原因之一（以及库中的其他相关）选择器

类似但不一样：CSS shorthand to identify multiple classes 还有许多其他问题确实提出了同样的问题，但它们的措辞非常糟糕，因此很难将其作为重复来关闭。

@BoltClock：感谢您提及其他问题。彻底完善了此查询的不可执行状态。

【参考方案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')

【讨论】：

只要我使用 .find() 就可以了。 .children() 刚刚打到第一个jsfiddle.net/7rMw5

:first 与 :first-child 不同，这就是您看到不同结果的原因。

【参考方案2】：

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

$('.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);
);

【讨论】：

是的.. 这是 jQuery 世界中最接近的，但它使用 .each()，这很好......但我只是想知道是否可以仅使用选择器来完成。谢谢，迈克尔...

是的，不用担心。没有 .each()

可能有一种更清洁的方法

【参考方案3】：

为什么不向你想像这样选择的div 添加另一个类

<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/

【讨论】：

我无法更改 html 结构。类名基于 Django slug

【参考方案4】：

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