选择后面没有另一个元素

Question

我需要能够选择一个 HTML p 标签，前提是它后面没有另一个具有特定类的 div 元素。例如，我需要选择这个P

<div id="myContainer">
    <p>...</p>
    <div>...</div>
</div>

但不是这个，因为它后面跟着一个 class="red" 的 div。

<div id="myContainer">
    <p>...</p>
    <div class="red">...</div>
</div>

这就是我正在尝试的：

#myContainer > p ~ div:not(.step)

Answer 1

您无法使用 CSS 来定位先前的元素，但根据您的 HTML 结构，您可以使用直接同级选择器。

CSS：

.myContainer p + div:not(.red)   {
   border: 1px solid #000;
}

HTML：

<div class="myContainer">
    <p>...</p>
    <div>...</div>
</div>
<div class="myContainer">
    <p>...</p>
    <div class="red">...</div>
</div>

演示 http://jsfiddle.net/92VVZ/

Answer 2

给出以下 HTML 代码：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    <div id="myContainer">
      <p>P1</p>
      <div>D1</div>
  </div>
  <div id="myContainer">
      <p>P2</p>
      <div class="red">D2</div>
  </div>
  </body>
</html>

CSS 选择器：

p:not(:has(+div.red))

将选择第一个

，但不会选择最后一个。

说明：

```
:not()
```
伪类表示一个未由其参数表示的元素 (link)
```
:has()
```
伪类（link）表示一个元素，当锚定到该元素时，该元素与其参数中的选择器相匹配。该伪类自 Chrome >= 105（2022 年 8 月 30 日发布）起开始工作，而截至 2023 年 12 月，它尚未在 Firefox 中发布(link)
下一个同级组合器
```
+
```
选择元素的下一个同级 (link)

所有其他答案都是错误的，因为它们选择了

div

元素，而不是之前的

元素。

Answer 3

你是这个意思吗？那么你就快到了。

演示

/* will select p not directly followed by div.red */
#myContainer > p + div:not(.red)

选择后面没有另一个元素

问题描述投票：0回答：3

3个回答

最新问题

选择后面没有另一个元素

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3