CSS选择器总结

CSS选择器

一、基本选择器

1.1、标签选择器

• 标签属性和值用:隔开，定义多个属性的时候使用;隔开

• 标签选择器作用于html标签

  /* 标签{属性:值} */
  div{
    font-size: 28px;
  }
  

1.2、类选择器

• 类选择器是被通过class的方式调用

• 一个标签可以同时调用多个类选择器，用空格隔开

• 多个标签可以同时调用同一个类选择器

    /* .类名{} */
    .demo{
      font-family: microsoft yahei;
      font-size: 28px;
    }
  /* ********************************************* */
    /*通过class调用，调用多个用空格隔开 */
    <div class="demo">调用类标签示例</div>
  

1.3、id选择器

• 一个id选择器在一个Html中只能被调用一次

• 一个标签不能同时调用多个id选择器

    /* #id选择器的名称 */
    #idname{
      color: green;
    }
    /* ********************************************* */
    <p id="idname">id选择器调用示例<p>
  

1.4、通配符选择器

• 给html中所有标签使用相同的样式

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

二、复合选择器

复合选择器就是两个以上的选择器通过不同的方式连接在一起

2.1、交集选择器

• 既使用了标签选择器又使用了类选择器或者id选择器

    <!-- 标签+类(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);
  }