CSS常用选择器、复合选择器、关系选择器

一、常用选择器

1. 元素（标签）选择器

作用：通过标签名选中对应的内容

语法：标签名{}

注意：html常用标签大概20多个，如果用元素选择器选中设置css样式一定要注意，是否会波及到其他的内容，如果波及到了，就不要用元素选择器

h1 {
        color: red;
      }

2. id选择器

作用：通过id属性值，选中对应的结构

语法：#id属性值{}

注意：id属性值不能重复使用，不能以数字开头，不能是汉字

#p1 {
        color: green;
      }

3.class选择器

作用：通过指定class属性值，选中对应的结构

语法：.class属性值{}

注意：（1）、这也是最常用的选择器

（2）、可以起多个class属性值，中间以空格隔开

.pp {
        color: green;
      }
.p2{
        background-color: pink;
      }

4.通配选择器

作用：选中页面中所有的标签

语法：*{}

      * {
        font-size: 24px;
      }

二、复合选择器

1.交集选择器

作用：选中满足多个条件的元素

语法：选择器1选择器2选择器3····{}

注意：如果选择器中有元素选择器，元素选择器必须放在第一位并集选择器

2.并集选择器

作用：选中多个选择器对应的内容

语法：选择1,选择器2，选择器3···{}

      div.red{
        font-size: 24px;
      }
      

      h1,h3{
        color: yellow;
      }

三、关系选择器

1. 子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

      #cs > span {
        color: red;
      }

2. 后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素 后代元素{}

注意：由于子元素一定情况下也属于后代元素，在使用的时候，能用子元素选择器，不用后代选择器,否则一定程度上会影响网站性能

      #cs span {
        font-size: 30px;
      }

3. 相邻兄弟选择器

作用：通过指定兄找到紧挨着下一个兄弟

语法：兄+弟{}

      .s1+span{
        background-color: pink;
      }

4. 普通兄弟选择器

作用：通过指定兄找到下面所有的兄弟，不包括前面的

语法：兄～弟{}

      .p1~span{
        background-color: violet;
      }