CSS子选择器

【问题标题】：CSS children SelectorCSS子选择器
【发布时间】：2011-11-22 02:09:12
【问题描述】：

假设我有以下 HTML

<div id="div1">
....
<span class="innercontents">...</span>
....
</div>

我可以只选择父 ID 的子 ID 吗？

我可以做类似的事情

#div1 span
{
...
}

感谢您的帮助。

如有任何混淆，我们深表歉意。我应该更清楚。在上面的示例中，我只想选择属于该特定

的标签

【问题讨论】：

选择器应该匹配什么？
还是？（如果
，那么你所要求的是不可能的。）
#div1 > .innercontents
"我可以只选择父 ID 的子类吗？" => 那句话很混乱。
#div1 > .innercontents stackoverflow.com/questions/1182189/…

标签： html css css-selectors

【解决方案1】：

#div1 > .innercontents /* child selector */

上面将从以下 HTML 中选择这些 id：c and d

<div id="div1">
   <div id="a">
     <span id="b" class="innercontents"></span>
   </div>
   <span id="c" class="innercontents"></span>
   <span id="d" class="innercontents"></span>
</div>

如果您希望从上述 HTML 中选择所有后代，例如 b, c, and d，请使用

#div1 .innercontents

【讨论】：

【解决方案2】：

是的。 #div1 > .innercontents。这是直接后代选择器或子选择器。

这是 CSS 选择器的最佳参考：http://www.w3.org/TR/css3-selectors/#selectors

【讨论】：

#div1 .innercontents 是后代选择器，而不是子选择器。
#div1 > .innercontents 然后，对于直接后代。