选择器类型

[Twlig]

选择器类型

普通选择器

• class选择器

  <style>
  .red {}
  </style>
  <div class="red"></div>

• id选择器

  <style>
  #red {}
  </style>
  <div id="red"></div>

• 元素选择器

  <style>
  div {}
  </style>
  <div></div>

• 属性选择器

  <style>
  [title] {}   /*有title属性的元素被选择*/
  </style>
  <div title="abs"></div>

复合选择器

• 交集选择器

  <style>
  div.red {}   /*div元素且是class为red的元素被选择*/
  </style>
  <div class="red"></div>

• 并集选择器

  <style>
  div, span {}   /*div元素或span元素被选择*/
  </style>
  <div class="red"></div>
  <span></span>

关系选择器

• 父类选择器

  <style>
  div > p {}   /*div元素的p子元素被选择*/
  </style>
  <div class="red">
  <p></p>
  <span><p></p></span>  /*span内的p子元素不被选择*/
  </div>

• 祖先选择器

  <style>
  div p {}   /*div元素的p子孙元素被选择*/
  </style>
  <div class="red">
  <p></p>
  <span><p></p></span>  /*span内的p子元素也被选择*/
  </div>

• 兄弟选择器

  <style>
  div + p {}   /*div元素后面的第一个p兄弟元素被选择*/
  </style>
  <div class="red">
  </div>
  <p></p> /*被选中*/
  <p></p>  /*不被选中*/

  <style>
  div ~ p {}   /*div元素后面的所有p兄弟元素被选择*/
  </style>
  <div class="red">
  </div>
  <p></p> /*被选中*/
  <p></p>  /*被选中*/

伪类选择器

  <style>
  div:hover {}   /*鼠标在div元素上悬浮时选中*/
  </style>
  <div><div>