CSS选择器

 CSS

复合选择器

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

 后代元素选择器

- 语法：

  E F {

      样式声明;

  }

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

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

- 代码示例：

  .box span{

    background-color:red;

  }

  <div class="box">

    <span>span1是子元素</span>

    <p>

      <span>span2是子元素的子元素</span>

    </p>

  </div>

  //.box内部的所有span变成了红色，包含在.box内部的通称为后代

子元素选择器

- 语法

  E > F {

      样式声明;

  }

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

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

- 实例演示:

  .box > span{

    background-color:red;

  }

  <div class="box">

    <span>span1是子元素</span>

    <p>

      <span>span2是子元素的子元素</span>

    </p>

  </div>

  /*只有span1变成了红色*/

相邻选择器

- 语法：

  E + F {

      样式声明;

  }

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

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

- 实例演示:

  .box + p{

    background-color:red;

  }

  <p>这个P元素不会被应用样式</p>

  <div class="box">box</div>

  <p>这个P元素会被应用样式</p>

  <p>这个P元素不会被应用样式</p>

  交集选择器

- 语法

  E.F {

      样式声明;

  }

- 描述：【无连接符】

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

- 实例演示：

  p.box{

    background-color:red;/*只对div有效*/

  }

  <p class="box">这个元素会被应用样式</p>

  <div class="box">这个元素不会被应用样式</div>

 并集选择器

- 语法

  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;

  }

 伪类选择器

  超链接的四种状态伪类

- 语法：【冒号：】连接

  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