一个标签的选择器，然后是另一个标签

88

这将选择所有<B>直接在<A>标签之后的标签：

A+B {
    /* styling */
}

对于所有的选择是什么<A>直接的标签，随后通过<B>标签？

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

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

css css-selectors

— Mostafa Farghaly
source

3

Pease给我们提供了一个DOM示例，它A与和如何B关联。

— Gumbo

2

它们之间的相关性在于它们是兄弟姐妹，B后面紧跟着A。OP希望选择所有bs后跟as，类似于a+b您可以选择所有b直接跟在s后面的a。

— 安东尼

2.5年后，此答案是否有更新？我还希望定位a，然后定位b。

— chovy

29

你不能在CSS。

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

— 耶罗恩
source

它接缝了唯一使用JavaScript的解决方案

— Mostafa Farghaly 09年

2

谢谢耶隆！那解决了我的问题。由于我的“ A”向左浮动，而“ B”向右浮动，所以我按什么顺序放置标记

— 都没关系。– BobRodes

53

您是说给A样式，因为它直接在内部或后面有B元素吗？像这样：

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

// OR

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

您还不能在CSS中做这样的事情。埃里克·迈耶（Eric Meyer）指出，这种选择器已经在CSS邮件列表中讨论了很多次，并且不可行。WebKit核心开发人员之一Dave Hyatt对此做出了很好的解释，解释了为什么它无法完成。

查看：Shaun Inman的博客文章和Eric Meyer的评论。
戴维·凯悦（David Hyatt）也参与其中。

— 尼克·普雷斯塔
source

我的意思是第二个，我理解这个问题，

— 谢谢尼克

17

您只能相反：选择所有直接在标签前面的标签。

从逻辑上讲，这等效于您的请求。

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

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>

— 马可·马尔萨拉（Marco Marsala）
source

3

我认为您打算在CSS中键入“ input + label”，以便将左边距应用到标签。

— CAK2

1

@ CAK2-我认为他的意思是对的。通过这样做label+input，从第二个input元素开始，对所有元素应用了空白。这是一种在它们之间创建空间的创造性方法，但不能在行的开头或结尾。在这种情况下，它等效于input:not(:first-child)。

— David

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>

展开摘要

— 麦海（Mihai Matei）
source