使用 CSS 选择器选择 HTML 中的特定元素 [重复]

Question

这是 HTML 结构。这种数据是动态生成的。它将有一些 <p> 标签，只有 c1 类，还有一些 <p> 标签，类 c1 和 c2 两者都有。

<div class="container">
    <p class="c1 ab">The 1st paragraph.</p>
    <p class="c1 cd">The 2d paragraph.</p>
    <p class="c1 ef">The 3rd paragraph.</p>
    <p class="c1 gh">The 4th paragraph.</p>
    <p class="c1 ij c2">The 5th paragraph.</p>
    <p class="c1 kl c2">The 6th paragraph.</p>
</div>

我需要选择最后一个带有 c1 类而不是 c2 类的 <p> 标记并将样式应用到它。即在给定的示例代码中，我需要选择样式并将其应用到具有类 c1 gh 的<p> 标记。

我为此编写了以下 CSS 代码。它选择了类 c1 的所有<p>，但不知道如何选择此类事件的最后一个元素。

<style> 
.container p:not(.c2) { background: red; }
</style>

我为此使用了以下代码，但它不起作用。

.container p:not(.c2):last-of-type { background: red; }
.container p:not(.c2) :last-of-type { background: red; }

提前感谢您的帮助！

Answer 1

:last-of-type 选择最后一个匹配元素。 :not(.class) 只是选择后应用的条件。选择器创建一个重叠组：

• c1:last-of-type = ["第 6 段。"]
• :not(.c2) = ["第 1 段。"，"第 2 段。"，"第 3 段。"，"第 4 段。"]

这些集合不重叠，所以选择器不匹配任何元素。

---

不久前我试图找到一个类似的选择器。 CSS 3 选择器的开发可能允许这样做。它允许您这样做：

p:nth-last-child(1 of :not(.c2)) {
    background: red;
}

但在撰写本文时，browser support 很差。它唯一可以工作的浏览器是 Safari（macOS 和 iOS）9+。所以这个解决方案在大多数情况下仍然不可用。

或者，如果元素始终是第 4 个元素，您可以使用 :nth-of-type(4)。或者你可以使用:nth-last-of-type(3)，如果元素总是在最后一个元素之前正好2个元素。

/* applicable only if the target element is always exactly 4th in .container */
.container .c1:nth-of-type(4) {
  background: red;
}


/* applicable only if the target element is always second to last */
.container .c1:nth-last-of-type(3) {
  background: red;
}


/* poor browser support (Safari 9+ at the time of writing) */
.container .c1:nth-last-child(1 of :not(.c2)) {
  background: blue;
}

<div class="container">
  <p class="c1 ab">The 1st paragraph.</p>
  <p class="c1 cd">The 2d paragraph.</p>
  <p class="c1 ef">The 3rd paragraph.</p>
  <p class="c1 gh">The 4th paragraph.</p>
  <p class="c1 ij c2">The 5th paragraph.</p>
  <p class="c1 kl c2">The 6th paragraph.</p>
</div>

如果这些都不适用，JavaScript 是一种解决方案，但在脚本被阻止的情况下它将不起作用。

当我想解决这个问题时，我选择编辑标记以添加标识我正在寻找的元素的类。

Answer 2

只有 CSS 是不可能的。最后一个类型的 Selector 调用实际上是最后一个 p-tag，如果它不与所选类一起使用，您的条件只会影响最后一个 p-tag。

我看到的唯一方法是，您必须使用您的框架或 JS 设置一个新类。

当您知道该元素是第 4 个时，您可以使用 :nth-child(4) 或者如果它是倒数第 3 个 :nth-last-child(3)

Answer 3

CSS 属性 nth-child ：

.container p:not(.c2):nth-child(4){ background: red; }

CSS 属性 nth-of-type ：

.container p:not(.c2):nth-of-type(4) { background: red; }

CSS 属性 nth-last-child ：

.container p:not(.c2):nth-last-child(3){ background: red; }