一个标签的选择器后面跟着另一个标签

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的核心开发人员之一,对于为什么无法完成这一工作进行了很好的解释.

查看:Shaun Inman的博客文章和Eric Meyer的评论.
大卫凯悦也很重要.

Answer 2

您现在可以使用:has()css 选择器 ( caniuse )：

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

可以这样理解：选择类为“.first”的所有元素，后跟类为“.second”的元素

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

Answer 3

你不能在CSS中.

编辑:为了更有帮助,如果你使用例如jQuery(一个JavaScript库),你可以使用.prev().

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>