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's blog post和comment by Eric Meyer David Hyatt weighs in也是。

Answer 2

你不能在css。

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

Answer 3

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

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

我经常使用它来设置一系列标签

的复选框

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 4

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

Answer 5

你可以，但支持仍然是错误的。其名称是相邻的兄弟选择器

http://reference.sitepoint.com/css/adjacentsiblingselector

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

5 个答案: