css复合选择器和关系选择器

一、复合选择器

交集选择器

交集选择器：
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{ }

例子1：

<div class="box">我是div</div>
<p class="box">我是p</p>

 div.box {
        color: orange;
    }

例子2

<p class="a">我是p</p>
<p class="a b c">我是p</p>

/* 同时满足含有a类和b类和c类*/
.a.b.c{
     color: red;
   }

选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素（执行共同的样式）
选择器1, 选择器2, 选择器3, 选择器n{ }

h1, span {
color: green;
}

二、关系选择器

子元素选择器

子元素选择器
作用：选中指定父元素中的指定子元素
语法： 父元素 > 子元素

例子1：不指定div

例子1,2结构

 <div class="box">
      我是一个div
      <span>我是div的span</span>
  </div>
  <div>
      我是一个div
      <span>我是div的span</span>
  </div>

 div > span {
    color:orange;
 } 

例子1：使用类名指定div

 div.box > span {
  color:orange;
 }

例子3指定元素

 <div class="box">
  我是box类的div
     <p>
         我是div中的p
         <span>我是p中的span</span>
     </p>
     <span>我是div的span</span>
 </div>
 <span>我是div外的span</span>
 <div>
     我是div
     <span>我是div的span</span>
 </div>

div > p > span {
 color: red;
 }

后代元素选择器

作用：选中指定元素内订单指定后代元素
语法：祖先 后代

例子1

 <div class="box">
  我是box类的div
     <p>
         我是div中的p
         <span>我是p中的span</span>
     </p>
     <span>我是div的span</span>
 </div>
 <span>我是div外的span</span>
 <div>
     我是div
     <span>我是div的span</span>
 </div>

/* 选择了div中的所有span */
div span {
     color: skyblue;
 }

兄弟元素选择器

• 兄弟元素

• 兄弟元素选择器：
  1、选择下一个兄弟 语法：前一个 + 下一个
  2、选择下边所有的兄弟元素 前一个 ~ 下一个

例子1：选择下一个兄弟

• 例子1,2结构

<div class="box">
  我是box类的div
   <p>
       我是div中的p
       <span>我是p中的span</span>
   </p>
   <span>我是div的span</span>
   <span>我是div的span</span>
   <span>我是div的span</span>
   <span>我是div的span</span>
   <span>我是div的span</span>
</div>

选择p元素的下一个紧挨着的兄弟span元素，如果这个p元素和下一个span元素中间隔了一个别的元素比如div，这个样式就不生效了

 p + span {
     color: red;
   }

例子2：选择下边所有的兄弟元素

选择p元素的下边所有的兄弟元素span元素，如果这个p元素和下一个span元素中间隔了一个别的元素比如div，也生效

 p + span {
   color: red;
  }