一个标签的选择器，后跟另一个标签答案

【问题标题】：Selector for one tag directly followed by another tag一个标签的选择器，后跟另一个标签
【发布时间】：2010-11-11 01:37:54
【问题描述】：

这会直接选择所有<B>标签前面由<A>标签：

A+B {
    /* styling */
}

所有<A>标签直接跟随<B>标签的选择器是什么？

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

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

【问题讨论】：

请给我们一个 DOM 示例，A 和 B 是如何相关的。
它们是相关的，因为它们是兄弟姐妹，B后面跟着A。OP想要选择所有bs，后面跟着as，类似于a+b，其中您可以选择所有直接以a 开头的bs。
2.5 年后，这个答案有更新吗？我还希望以 a 为目标，然后是 b。

标签： css css-selectors

【解决方案1】：

虽然它不是很方便，但现在您可以通过在生成 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>

【讨论】：

【解决方案2】：

你只能做相反的事情：这会选择所有直接在标签前面的标签。

这在逻辑上等同于您的请求。

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

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>

【讨论】：

我认为您的意思是在 CSS 中键入“input+label”，以便将 margin-left 应用于标签。
@CAK2 - 我认为他的意思是对的。通过执行label+input，边距将应用于从第二个元素开始的所有input 元素。这是一种在它们之间创造空间的创造性方式，但不是在行的开头或结尾。在这种情况下，它相当于input:not(:first-child)。

【解决方案3】：

你不能在 css 中。

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

【讨论】：

它是唯一使用 JavaScript 的解决方案
谢谢杰罗恩！这解决了我的问题。由于我的“A”向左浮动，“B”向右浮动，因此我将标记放入的顺序无关紧要。

【解决方案4】：

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

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

// OR

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

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

查看：Shaun Inman's blog post 和 comment by Eric Meyer。
David Hyatt weighs in 也是。

【讨论】：

我的意思是第二个，我明白这个问题谢谢你 nick :)