#，.和>符号的不同用法有哪些？它们引用了什么？
例如，我知道这两个：
div#id {} // <div id="id" />
div.class {} // <div class="class" />
然而，还有一些我不明白的事情：
div#id element
div#id>element
div#id.class
div#id .class
div#id>element#id .class
任何见解？
答案 0 :(得分：13)
正如pst所说，你应该自己阅读更多内容。我将补充说，您可以使用Firebug或jsFiddle等在线工具进行实验，以查看实时结果。但是我明白并不是每个人都会将ID和类选择器结合起来，而且你的选择器非常相似并且这样的束缚会让人感到困惑，所以这里有：
>符号称为子组合子，与空格（后代组合）不同，>只看一个在DOM层次结构深层次。
比较前两个选择器：
div#id element /* With a space */
选择
element
来自divid="id"的{{1}}的任何内容。
会匹配其中任何一个：
<div id="id">
<element />
</div>
<div id="id">
<div class="class">
<element />
</div>
</div>
div#id>element /* With a > sign */
选择
element
这是divid="id"的一个孩子（直接包含在其中）。
只会匹配这个：
<div id="id">
<element />
</div>
但不是这样，因为div.class和element之间存在中间div#id：
<div id="id">
<div class="class">
<element />
</div>
</div>
因为空格代表后代组合子，所以它在CSS选择器语法中很重要（除了在其他组合器和简单选择器之间使用时，例如E > F和E>F是相同的）。
比较接下来的两个选择器：
div#id.class /* No spaces anywhere */
选择
div和id="id"的{{1}}。
通过省略空间，你将三件事串在一起：
元素选择器（class="class"），
ID选择器（div），和
班级选择器（#id）。
因此，单个元素必须满足所有三个选择器才能成为其规则的目标。在HTML中，这意味着它必须具有这两个属性，如：.class
div#id .class /* With a space */
选择
<div id="id" class="class">的任何元素 它来自class="class"的{{1}}。
注意分隔div和id="id"的空格。这意味着div#id适用于完全不同的元素。
会匹配其中任何一个：
.class
.class但是这里没有任何内容可以匹配，因为在<div id="id">
<p class="class"></p>
</div>
内找不到<div id="id">
<div>
<p class="class"></p>
</div>
</div>
：
.class而不是这个，出于同样的原因：
div#id最后一个选择器只是将它们放在一起：
div#id>element#id .class
有趣的是，相应的HTML结构将无效，因为您不能拥有多个具有相同ID的元素，但无论如何：
选择
<div id="id"> <element /> </div>的任何元素 它来自<div id="id" class="class"></div>的{{1}} 这是class="class"element的孩子。
答案 1 :(得分：6)
#选择一个ID（<div id="something"></div> - ＆gt; #something）.选择一个班级（<div class="something"></div> - ＆gt; .something）>直接在特定父级（<div><p></p></div> - ＆gt; div > p）下选择一个孩子<space>选择指定父级（<div><p id="one"></p><p id="two"></p></div> - ＆gt; div #one