[分享]css3层次选择器怎么用

CSS3层次选择器允许您通过指定HTML元素之间的关系来选择元素，从而实现更灵活和精确的样式控制。下面是一些常见的CSS3层次选择器。/ 后代选择器（例如 div p）将选择所有元素 p，它们是元素 ...

CSS3层次选择器允许您通过指定HTML元素之间的关系来选择元素，从而实现更灵活和精确的样式控制。下面是一些常见的CSS3层次选择器。

/* 后代选择器（例如 div p）将选择所有元素 p，它们是元素 div 的后代（即直接或间接包含在 div 中） */
div p {
  color: red;
}

/* 子选择器（例如 div > p）将选择元素 p，只有当它们是元素 div 的直接子元素时才是如此 */
div > p {
  color: blue;
}

/* 相邻兄弟选择器（例如 h1 + p）将选择紧接在元素 h1 之后的元素 p（具有相同的父元素）*/
h1 + p {
  font-size: 20px;
}

/* 通用兄弟选择器（例如 h1 ~ p）将选择所有元素 p，其前面有元素 h1（具有相同的父元素）*/
h1 ~ p {
  text-decoration: underline;
} 

以上是CSS3层次选择器的使用及其基本样式示范，可以根据需要进行拓展和应用，让样式更加丰富多彩。