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 example

Answer 2

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

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

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

使用元素中子项的文本内容标识元素

2 个答案: