[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元素