CSS選擇器

一、基本選擇器

1.1、標(biāo)簽選擇器

• 標(biāo)簽屬性和值用:隔開，定義多個屬性的時候使用;隔開

• 標(biāo)簽選擇器作用于html標(biāo)簽

  /* 標(biāo)簽{屬性:值} */
  div{
    font-size: 28px;
  }
  

1.2、類選擇器

• 類選擇器是被通過class的方式調(diào)用

• 一個標(biāo)簽可以同時調(diào)用多個類選擇器，用空格隔開

• 多個標(biāo)簽可以同時調(diào)用同一個類選擇器

    /* .類名{} */
    .demo{
      font-family: microsoft yahei;
      font-size: 28px;
    }
  /* ********************************************* */
    /*通過class調(diào)用，調(diào)用多個用空格隔開 */
    <div class="demo">調(diào)用類標(biāo)簽示例</div>
  

1.3、id選擇器

• 一個id選擇器在一個Html中只能被調(diào)用一次

• 一個標(biāo)簽不能同時調(diào)用多個id選擇器

    /* #id選擇器的名稱 */
    #idname{
      color: green;
    }
    /* ********************************************* */
    <p id="idname">id選擇器調(diào)用示例<p>
  

1.4、通配符選擇器

• 給html中所有標(biāo)簽使用相同的樣式

  /* *{} */
  *{
    color:#FF0000;
  }

二、復(fù)合選擇器

復(fù)合選擇器就是兩個以上的選擇器通過不同的方式連接在一起

2.1、交集選擇器

• 既使用了標(biāo)簽選擇器又使用了類選擇器或者id選擇器

    <!-- 標(biāo)簽+類(id)選擇器{} -->
      .classname{
        font-size: 28px;
      }
      div.classname{
          color: red;
      }
      div#idname{
        background-color: #990000
      }
  

2.2、后代選擇器

• 后代選擇器用來選擇元素或元素組的后代

• 選擇器之間用空格空開

    /* 選擇器+空格+選擇器{} */
    div span{
      color:red;
    }
  

2.3、子代選擇器

• 類似于后代選擇器，但只能作用于直接子一代

• 選擇器之間用>隔開

      div>span{
        color: color.rgb(255, 0, 0);
      }
  

2.4、并集選擇器

• 并集選擇器是各個選擇器用逗號連接而成，任何選擇器都行

  /* 選擇器,選擇器,選擇器{} */
  .choise1,#choise2,div{
    font-size: 30px;
    background-color: color.rgba(255, 0, 0, 0.5);
  }