jquery - 使用元素内子元素的文本内容识别元素

Question

我有一些列表元素，我只需要对最后三个元素应用样式。如何将样式应用于这三个？在未来的版本中，它们可能不在列表的末尾，所以我更喜欢利用标签内的文本的版本，该标签出现在每个标签内，如下所示：

<ul>
  <li>
    //I DON'T want to select this one
    //<label>I</label>
  </li>
  <li>
    //I DON'T want to select this one
    <label>don't</label>
  </li>
  <li>
    //I DON'T want to select this one
    <label>care.</label>
  </li>
  <li>
    //I want to select this one
    <label>Label 1</label>
    //more follows...
  </li>
  <li>
    //I want to select this one
    <label>Label 2</label>
    //more follows...
  </li>
  <li>
    //I want to select this one
    <label>Label 3</label>
    //more follows...
  </li>
</ul>

Answer 1

利用：

$('li:has("label")')

选择具有标签元素作为子项的列表项。.has()：“选择包含至少一个与指定选择器匹配的元素的元素。” 您也可以使用$('li').has("label")它可能会稍微提高性能。

jsFiddle 示例

Answer 2

您可以像这样在 CSS 中使用 nth-child：

li:nth-child(n+3) { color: #999 }

n+3 语法意味着颜色应用于前三个之后的任何列表项（因此在上面的示例中，有六个列表项，它将颜色应用于最后三个。