如何根据元素的位置关系来调整 CSS 样式

作者：System 时间：2024年08月19日分类：所有,css 字数：637

在CSS中，可以使用相邻兄弟选择器（+）和一般兄弟选择器（~）来根据元素的位置关系调整样式。

相邻兄弟选择器（+）: 用于选择紧跟在另一个元素之后的元素，并且二者具有相同的父元素。




element1 + element2 {
  /* 样式 */
}

一般兄弟选择器（~）: 用于选择某个元素之后所有特定类型的兄弟元素。




element1 ~ element2 {
  /* 样式 */
}

例如，假设有以下HTML结构：




<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

要为第二个<li>元素设置特定样式，可以使用相邻兄弟选择器：




li + li {
  color: red;
}

这将仅应用于每个紧跟在另一个<li>元素后面的<li>元素，即只会影响“Item 2”。

如果要为所有紧随<li>Item 1</li>之后的<li>元素设置样式，可以使用一般兄弟选择器：




li:first-child ~ li {
  font-weight: bold;
}

这将应用于“Item 2”和“Item 3”，因为它们都是“Item 1”的一般兄弟元素。