在另一个元素之后选择第一个出现的元素

我在一个页面上得到了下面的 HTML 代码:

<h4>Some text</h4>
<p>
Some more text!
</p>

在我的 .css中，我有以下选择器来设计 h4元素的样式。上面的 HTML 代码只是整个代码的一小部分; 还有几个 div代码更多地包装在一个影子盒中:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
color               : #614E43;
margin-top          : 5px;
margin-left         : 6px;
}

因此，我为 h4元素设置了正确的样式，但是我也想在 HTML 中设置 p标记的样式。

这是可能的 CSS 选择器吗? 如果是，我如何做到这一点？

171313 次浏览
小开
最佳答案 
#many .more.selectors h4 + p { ... }

这就是 邻近兄弟姐妹选择器。

小开

只是在我自己解决这类问题的时候偶然发现的。

我做了一个选择器，它处理除了 p 之外的元素。

.here .is.the #selector h4 + * {...}

希望这对找到它的人有所帮助:)

小开

对于您的文字示例，您需要使用相邻的选择器(+)。

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>


<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

但是，如果要选择所有连续的段落，则需要使用通用的兄弟选择器(~)。

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>


<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

不幸的是，在 IE7 + 中，这个问题是众所周知的。

小开

为初学者简化:

如果要在另一个元素之后立即选择一个元素，请使用 +选择器。

例如:

+元素选择紧跟在 <div>元素之后的所有 <p>元素

如果你想了解更多关于选择器使用这个 桌子。

小开

我使用最新的 CSS 和“ +”不适合我，所以我结束了

翻译: first-child


提交答案