CSS选择器

使用CSS对HTML页面中的元素实现一对一, 一对多或者多对一对控制, 这就需要用到选择器

id选择器

<div id="s1">id选择器</div>

<style type="text/css">
  #s1 {
    color: red;
  }
</style>

类选择器

<div class="s2">类选择器1</div>
<div class="s2">类选择器2</div>
<div class="s3">类选择器3</div>

<style type="text/css">
  .s2 {
    color: green;
  }
  
  /* 可以将多个选择器写在一起 */
  .s2, .s3, #s1 {
    font-style: italic;
  }
</style>

标签选择器

<p>标签选择器1</p>
<p>标签选择器2</p>

<style type="text/css">
  p {
    color: blue;
  }
</style>

相邻选择器

<!-- +只选择紧邻的兄弟 --> 
<div id="s4">相邻选择器+</div>
<div>相邻选择器</div>

<div id="s5">相邻选择器</div>
<div class="s6">相邻选择器</div>
<div class="s6">相邻选择器</div>
<div class="s6">相邻选择器</div>
<!-- ~选择兄弟以及兄弟的兄弟 -->

<style type="text/css">
  #s4 + div {
    color: #0033ff;
  }
  #s5 ~ .s6 {
    color: #FFD700
  }
</style>

子元素选择器

<div class="s7">
  <div>子元素选择器</div>
  <em>
    <div>子元素选择器不被选择</div>
    <div>子元素选择器不被选择</div>
  <em>
</div>

<style type="text/css">
  /* 子选择器会选择下一级 */
  .s7 > div {
    color: #E066FF;
  }
</style>

后代选择器

<div class="s8">
  <div>后代选择器</div>
  <em>
    <div>后代选择器</div>
    <div>后代选择器</div>
  </em>
</div>

<style type="text/css">
  /* 后代选择器会选择全部后代 */
  .s8 div {
    color: #7CFC00;
  }
</style>

通配选择器

<div class="s9">
  <div>通配选择器</div>
  <em>通配选择器</em>
</div>

<style type="text/css">
  .s9 * {
    color:#3370CC;
  }
</style>

属性选择器

<div rel="s10">属性选择器</div>

<style type="text/css">
  div[rel="s10"] {
    color: #573CC4;
  }
</style>

伪类选择器

<div>
  <div class="s11"> 伪类选择器</div>
</div>

<style type="text/css">
  .s11:first-child {
    color: #55AA55;
  }
</style>