第四章选择符

第四章选择符

1.后代选择符( )

1.1 优先级问题（顺序问题）

  <div class="red">
    <div class="blue">hello
      <p>world</p>
    </div>
  </div>
  <div class="blue">
    <div class="red">hello
      <p>world</p>
    </div>
  </div>
  <style>
    .red p{
      color:red
    }
    .blue p{
      color:blue
    }
  </style>

后代选择生效的顺序，之和css的优先级有关，和html文件中的Dom顺序毫无关系

2.子选择符(>)

子选择符只会匹配第一代子元素，而后代选择符会匹配所有子元素
往往来说，最好将子选择符替换为后代选择符的情况。因为子选择符太过于依赖html结构，如果html结构发生变化，css文件也要跟着修改。
那什么时候用子选择符呢？
1.状态类名控制：比如.active,会存在文档中一棵dom子树中，存在多个节点会添加.active类，因此需要子选择符
2.同名标签多到冲突(li)
3.真的需要判断层级的时候

3.相邻兄弟选择符(+)

<h4>
</h4>
HELLO
<!--我是废物-->
<p>WORLD</p>
<style>
  h4 + p{
    color:red
  }
</style>

尽管h4和p之间，存在文本结点和注释节点，但是(+)会自动忽略

4.随后兄弟选择符(~)

相邻兄弟选择符只会匹配它后面的第一个兄弟元，而随后兄弟选择符会匹配所有；
对于文本节点和注释节点，也会忽略