CSS六大复合选择器

概述：由两个或多个基础选择器通过不同的方式组合而成的选择器

1. 后代元素选择器

• 语法：

  E F {
      样式声明;
  }

• 描述：【空格】连接一个或多个选择器

• 作用： 选择E元素内部包含的所有F元素

• 代码示例：

  .box span{
      background-color:red;
  }
  ​
  <div class="box">
      <span>span1是子元素</span>
      <p>
          <span>span2是子元素的子元素</span>
      </p>
  </div>
  //.box内部的所有span变成了红色，包含在.box内部的通称为后代

2. 子元素选择器

• 语法

  E > F {
      样式声明; 
  }

• 描述：【大于】号 连接一个或多个选择器

• 作用： 选择E元素内部包含的所有直接子元素F（第一嵌套层级）

• 实例演示:

  .box > span{
      background-color:red;
  }
  ​
  <div class="box">
      <span>span1是子元素</span>
      <p>
          <span>span2是子元素的子元素</span>
      </p>
  </div>
  /*只有span1变成了红色*/

3. 相邻选择器

• 语法：

  E + F { 
      样式声明;
  }

• 描述：【加号】连接一个或多个选择器

• 作用： E元素之后紧跟着的兄弟元素F

• 实例演示:

  .box + p{
      background-color:red;
  }
  ​
  <p>这个P元素不会被应用样式</p>
  <div class="box">box</div>
  <p>这个P元素会被应用样式</p>
  <p>这个P元素不会被应用样式</p>

4. 交集选择器

• 语法

  E.F { 
      样式声明;
  }

• 描述：【无连接符】

• 作用：选择同时被所有选择器交集选中的元素

• 实例演示：

  p.box{
      background-color:red;/*只对div有效*/
  }
  ​
  <p class="box">这个元素会被应用样式</p>
  <div class="box">这个元素不会被应用样式</div>

5. 并集选择器

• 语法

  E，F { 
      样式声明;
  }

• 描述：【逗号】连接一个或多个选择器

• 作用： 使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式

  /*不使用并集选择器*/
  .box{
       color:Red;
  }
  div{
        color:red;
  }
  #test{
         color:red;
   } 
   
  <p class="box">p1</p>
  <div>div</div>
  <span id="test">span</span>

  /*使用并集选择器——精简代码*/
  .box,div,#test{
      color:red;
  }

6. 伪类选择器

超链接的四种状态伪类

• 语法：【冒号：】连接

  a:link{ css样式 }   //链接未被访问
  a:visited{ css样式 } //链接被访问过后
  a:hover{ css样式 }   //链接被鼠标悬停
  a:active{ css样式 }  //链接被激活（鼠标按下不抬起时）

• 总结：

  • 注意书写顺序 l-v-h-a

  • 实际工作中最常用的是:hover

  • 可以与其它选择器结合灵活使用

• 实例演示：

  .box a:hover{ color:red; }      .box内部的a鼠标滑过时
  .abox:hover {color:green;}      .abox鼠标滑过时
  .abox:hover > span{color:red;}  .abox滑过时它内部的直接子元素span