CSS 基础/后代/子选择器

CSS 基础/后代/子选择器

January 10, 2020
Web, Frontend
★ 在 GitHub 赞我

class-oneclass-two 两个类的不同效果:


/* 基本交集 */
.class-one.class-two {
  background-color: grey;
}

/* 后代元素 */
.class-one .class-two {
  background-color: brown;
}

/* 子元素 */
.class-one > .class-two {
  background-color: orange;
}

div 设了 width: 100pxheight: 100px;:


<div class="class-one class-two">
</div>


<div class="class-one">
  <div class="class-two">
  </div>
</div>

<div class="class-one">
  <div>
    <div class="class-two">
    </div>
  </div>
</div>