以css <element> + <element> 中的第一个元素为目标答案

【问题标题】：Targetting first element in css <element> + <element>以css <element> + <element> 中的第一个元素为目标
【发布时间】：2012-06-12 20:04:19
【问题描述】：

在 css 中有相邻的选择器 + - 但是有谁知道我将如何定位该选择器中的第一个元素。

即我想在以下选择器中定位<div>：

div + p

提前致谢

【问题讨论】：

简单的答案是“你不能”。如果您显示相关的 HTML，我们可能会找到一个有效的选择器。
另外，为什么要围绕div + p进行讨论。你可以做任何像div {..}
有一个选择器可以获取第一个子元素，但不是第一个元素。

标签： css css-selectors

【解决方案1】：

没有用于此的 css 选择器，但您可以通过一些 css & html 操作来实现这一点。像这样写：

HTML

<div class="parent">
   <p>hover me</p>
   <div>hello</div>
</div>

CSS

.parent{
    -moz-box-orient:vertical;
    -moz-box-direction:reverse;
    display: -moz-box;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    display: -webkit-box;
    box-orient: vertical;
    box-direction: reverse;
    display:box;
}
p{
    color:red;
}
p:hover + div{
    color:green;
    font-size:30px;
}

查看http://jsfiddle.net/LEh2W/1/

这可能对你有帮助，但它在 IE 中不起作用。

【讨论】：

我认为假设元素垂直堆叠是不明智的。
但是你得到你想要的效果。

【解决方案2】：

如果这些 div 被包含在另一个元素中，也许你可以使用这个选择器：

http://w3schools.com/cssref/sel_firstchild.asp

div:first-child {  background-color:yellow; }

所以这将“选择每个 div 元素并设置其父元素的第一个子元素”。因此，假设您的 div 是其父级的第一个孩子，您可以使用它。但是，我仍然没有看到这样做的实际理由。我建议简单地为这些 div 设置一个类并使用类选择器。

【讨论】：

div + p 意味着div 和p 共享同一个父级，因此p 不能成为第一个子级。
是的，但是发帖人要找的是如何选择
。在我的回答中，我只是从 w3cschools 链接中复制了示例，但为了清楚起见，我将对其进行编辑，因为您提到了它。干杯。