css选择相邻的前一个元素

最新推荐文章于 2024-12-02 17:38:34 发布

原创最新推荐文章于 2024-12-02 17:38:34 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

这篇文章介绍了如何使用CSS的`:has()`伪类来选取某个元素（classb）之前的一个具有特定类（classa）的元素。示例代码展示了在HTML结构中应用这种选择器的实际效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>css选择相邻的前一个元素</title>
    <style>
      .a:has(+ .b) {
        color: red;
        background-color: gainsboro;
      }
    </style>
  </head>
  <body>
    <h1>选择class b前面的 class a</h1>
    <div>
      <div class="a">a</div>
      <div class="a">a</div>
      <div class="b">b</div>
      <div class="a">a</div>
      <div class="a">a</div>
      <div class="a">a</div>
      <div class="a">a</div>
      <div class="b">b</div>
    </div>
  </body>
</html>