下一个元素的CSS选择器语法是什么?

如果我有一个标题标签<h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

在这之后我有一个段落<p>stuff here</p>。

我如何确保使用CSS，每个<p>标记，跟随h1。hc改革使用:明确:两者;

会是:

h1.hc-reform > p{
     clear:both;
}

出于某种原因，这行不通。

这被称为相邻兄弟选择器，它由一个加号表示…

h1.hc-reform + p {
  clear:both;
}

注意:这在IE6或更老版本中不支持。

2010-09-07 15:24:40

没有>是子选择器。

你要的是+

试试h1。Hc-reform + p

浏览器支持不是很好

2010-09-07 15:25:28

>是子选择器。如果你的HTML是这样的:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

．.．那就是你的票了。

但是如果你的HTML是这样的:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

然后你需要相邻的选择器:

h1.hc-reform + p{
     clear:both;
}

2010-09-07 15:26:12

你可以使用兄弟选择器~:

h1.hc-reform ~ p{
     clear:both;
}

它选择了所有在。hc-reform之后的p个元素，而不仅仅是第一个。

2010-09-07 15:30:55

不完全是。h1。Hc-reform > p表示“在h1.hc-reform之下的任何p”。

你想要的是h1。当然，这在旧版本的ie浏览器中可能会导致一些问题;如果你想让页面与旧的ie兼容，你将会被手动添加一个类到段落或使用一些JavaScript(在jQuery中，例如，你可以这样做$('h1.hc-reform').next('p'). addclass ('first-paragraph'))。

更多信息:http://www.w3.org/TR/CSS2/selector.html或http://css-tricks.com/child-and-sibling-selectors/

2010-09-07 15:32:15

下一个元素的CSS选择器语法是什么?

推荐文章

最新文章

标签