#的用法是什么？>和CSS选择器中的空间？

Question

有哪些不同的用途为#,.和>符号,他们怎么引用？

例如,我知道这两个:

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

任何见解？

Answer 1

正如pst所说,你应该自己阅读更多内容.我将补充说,您可以使用Firebug或jsFiddle等在线工具进行实验,以查看实时结果.但我明白并不是每个人都会将ID和类选择器结合起来,而且你的选择器非常相似并且这样的束缚可能令人困惑,所以这里有:

该>符号称为子组合子,与空白(后代组合子)不同,>只是在DOM层次结构中看起来只有一层.

比较前两个选择器:

• div#id element /* With a space */

  选择一个element
  从下降(包含任何地方范围内)div的id="id".

  会匹配其中任何一个:

  <div id="id">
      <element />
  </div>
  

  <div id="id">
      <div class="class">
          <element />
      </div>
  </div>
  

• div#id>element /* With a > sign */

  选择element
  哪个是(直接包含在)a div的子项中id="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"和class="class".

  通过省略空间,您将三个事物链接在一起:

  1. 元素选择器(div),

  2. ID选择器(#id)和

  3. 类选择器(.class).

  因此,单个元素必须满足所有三个选择器才能成为其规则的目标.在HTML中,这意味着它必须具有这两个属性,如下所示:<div id="id" class="class">

• div#id .class /* With a space */

  选择任何class="class"
  来自a 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="id">
      <element />
  </div>
  

  而且不是这个,出于同样的原因:

  <div id="id" class="class"></div>
  

最后一个选择器只涉及将它们放在一起:

• div#id>element#id .class

  有趣的是,相应的HTML结构将无效,因为您不能拥有多个具有相同ID的元素,但无论如何:

  选择的任何元素class="class"
  ,其下降从element的id="id"
  是一个孩子div的id="id".

Answer 2

• #选择一个ID(<div id="something"></div>- > #something)
• .选择一个类(<div class="something"></div>- > .something)
• >直接在特定父级(<div><p></p></div>- > div > p)下选择一个孩子
• <space>选择指定父级下的后代(<div><p id="one"></p><p id="two"></p></div>- >div #one