css层次选择器代码

CSS中的层次选择器是一种非常有用的选择器，它可以让我们通过父元素、子元素或兄弟元素之间的关系来选择特定的元素。

/* 选择子元素 */
.parent > .child {
  /* 父元素为 .parent，子元素为 .child */
  color: blue;
}

/* 选择后代元素 */
.parent .descendant {
  /* 父元素为 .parent，后代元素为 .descendant */
  font-size: 16px;
}

/* 选择相邻兄弟元素 */
.sibling1 + .sibling2 {
  /* 选择 sibling1 后面的兄弟元素 sibling2 */
  background-color: yellow;
}

/* 选择所有后面的兄弟元素 */
.sibling ~ .sibling {
  /* 选择 sibling 后面的所有兄弟元素 sibling */
  border: 1px solid black;
}

通过层次选择器，我们可以轻松地为各种情况下的元素设置不同的样式效果，大大提高了开发效率。