css的基础

CSS

1、复合选择器

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

1.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内部的通称为后代

1.2 子元素选择器

• 语法

  E > F {
      样式声明; 
  }

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

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

• 实例演示:

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

1.3 相邻选择器

• 语法：

  E + F { 
      样式声明;
  }

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

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

• 实例演示:

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

1.4 交集选择器

• 语法

  E.F { 
      样式声明;
  }

• 描述：【无连接符】

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

• 实例演示：

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

1.5 并集选择器