首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >选择另一个元素后的第一个出现的元素

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

Stack Overflow用户
提问于 2011-01-07 15:17:55
回答 4查看 149.8K关注 0票数 138

我在一个页面上有以下HTML代码:

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

在我的.css中,我有以下选择器来设置h4元素的样式。上面的HTML代码只是整个代码的一小部分;还有几个属于shadowbox的div

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

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

使用CSS-选择器可以做到这一点吗?如果是,我如何做到这一点?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-01-07 15:22:34

#many .more.selectors h4 + p { ... }

这称为adjacent sibling selector

票数 229
EN

Stack Overflow用户

发布于 2012-10-26 01:41:31

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

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>

It's known to be buggy in IE 7+ unfortunately

票数 42
EN

Stack Overflow用户

发布于 2012-06-07 17:35:12

当我自己尝试解决这类事情时,我突然想到了这一点。

我做了一个选择器,在元素不是p的情况下处理元素。

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

希望这对任何找到它的人都有帮助:)

票数 19
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4623328

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档