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);
  }