一个标签的选择器，后跟另一个标签[重复]

Question

这将直接选择所有

<B>

标签前面的由

<A>

标签：

A+B {
    /* styling */
}

所有

<A>

标签直接后接

<B>

标签的选择器是什么？

这是适合我的问题的 HTML 示例：

<a>some text</a>
<b>some text</b>

Answer 1

您的意思是给 A 设置样式，因为它直接在内部或后面有一个 B 元素吗？像这样：

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

你还不能在 CSS 中做这样的事情。 Eric Meyer 表示，这种选择器已经在 CSS 邮件列表上讨论过很多次了，但并不可行。 Dave Hyatt，WebKit 核心开发人员之一，在评论中很好地解释了为什么无法做到这一点。

Answer 2

CSS 中不能。

编辑： 为了更有帮助，如果您使用 jQuery（一个 JavaScript 库），您可以使用

.prev()

。

Answer 3

您现在可以使用

:has()

css 选择器 (caniuse):

.first:has(+ .second) {
    background: #ff0000;
}

可以理解为：选择具有类

.first

的所有元素，后跟类

.second

的元素

<div class="first">Foo</div>
<div class="second">Bar</div>

Answer 4

您只能执行相反的操作：这将选择紧邻标签之前的所有标签。

这在逻辑上等同于你的要求。

我经常用它来设置一行带有标签的复选框的样式

CSS：

label+input {
    margin-left: 4px;
}

DOM：

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

Answer 5

虽然不是很方便，但现在您可以通过在生成 HTML 时反转元素的顺序并应用 CSS 规则来实现此行为：

display: flex

和

flex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

此外，如果您有 2 个或更多内联元素，您可以通过应用

float: right

来实现，因为它们将以相反的顺序显示：

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>