CSS子选择器

Question

假设我有以下 HTML：

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

我能只选择父元素ID的子元素吗？

我可以像这样做吗：

#div1 span
{
...
}

感谢任何帮助。

对于任何混淆，我应该更加清晰。在上面的示例中，我只想选择落在特定

下的标签。

- jdross

---

选择器应该匹配什么？<div>还是<span>？（如果是<div>，那么你要求的是不可能实现的。） - millimoose

#div1 > .innercontents - Justin ᚅᚔᚈᚄᚒᚔ

我可以只选择父类 ID 的子类吗？=> 那个句子很令人困惑。 - Richard JP Le Guen

#div1 > .innercontents - Alex

Answer 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 和 d，则使用以下代码：

#div1 .innercontents 

- John Hartsock

Answer 2

是的。 #div1 > .innercontents。这是直接子代选择器，也称为子选择器。

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

- CamelCamelCamel

---

#div1 .innercontents是一个后代选择器，而不是子选择器。 - Frédéric Hamidi

#div1 > .innercontents 表示只匹配直接子元素。 - CamelCamelCamel