关于前端: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 元素