CSS3中的几个选择器

[TOC]

css选择器

逗号 群组选择器

AB使用同一个样式表

<div class="A"></div> 
<div class="B"></div>

<style>
.A, .B {
    width: 200px;
    height: 200px;
    background: Bisque ;
    margin: 20px;
}
</style>

如果其中一个元素出现格式错误，则群组内的所有样式都会失效。比如上面.A写成..A，则.A和.B的样式都不会生效。

空格 后代选择器

选择A后代的所有B元素(不管中间间隔多少代)

  <div class="A">
    <div class="C">
      <div class="B"></div>
    </div> 
    <div class="B"></div>
  </div> 
  <div class="B"></div>

<style>
* {
  margin: 0px;
  padding: 0px;
}
.A {
    width: 200px;
    height: 200px;
    background: #e0ffff ;
    margin: 20px;
}

 .B {
    width: 50px;
    height: 50px;
    background: Bisque ;
    margin: 20px;
}
</style>

> 大于号 子元素选择器

选择A的子元素中为B的元素(只包含子这一层元素)

  <div class="A">
    <div class="B"></div>
  </div> 
  <div class="A">
    <div class="C">
      <div class="B"></div>
    </div>
  </div> 
<style>
.A {
  width: 200px;
  height: 200px;
  background: #e0ffff ;
  margin: 20px;
}

.A > .B {
  width: 50px;
  height: 50px;
  background: Bisque ;
  margin: 20px;
}
</style>

css3开始支持 > 子元素选择器。

+ 加号 相邻兄弟选择器

选择紧跟着A元素的B元素

  <div class="A"></div> 
  <div class="B"></div>
  <div class="B"></div>
  <div class="C"></div>
<style>
.A + .B {
  width: 50px;
  height: 50px;
  background: Bisque ;
  margin: 20px;
}
</style>

如图只显示了一个颜色块，说明只有一个B元素的样式生效

• 使用场景 多个相同元素只有第一个元素样式不一样

  <div class="B"></div>
  <div class="B"></div>
  <div class="B"></div>
  
  <style>
  .B {
  width: 50px;
  height: 50px;
  background: red;
  margin: 20px;
  }
  
  .B + .B {
  width: 50px;
  height: 50px;
  background: Bisque ;
  margin: 20px;
  }
  </style>

~ 兄弟选择器

与相邻兄弟选择器的区别是不需要紧跟着，只要是相同父元素即可

  <div class="B"></div>
  <div class="A"></div>
  <div class="B"></div>
  <div class="A"></div>
  <div class="B"></div>
  
<style>
.A {
  width: 50px;
  height: 50px;
  background: #e0ffff;
  margin: 20px;
}

.A + .B {
  width: 50px;
  height: 50px;
  background: Bisque ;
  margin: 20px;
}
</style>

从图看显示出4个元素，第一个B元素是没有样式的，因为它前面没有A元素