使用 :has() 时没有看到变化

问题描述 投票:0回答:1

我最近发现了

:has()
伪类。当我尝试测试它时,我没有看到任何变化。我真的不知道为什么。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

section {
  background-color: hotpink;
  width: 500px;
  height: 500px;
  margin: 10px;
}

section:has(div) {
  background-color: blueviolet;
}
<section>
  <h1></h1>
</section>
<section></section>
<section></section>
<section></section>

css css-selectors pseudo-class
1个回答
1
投票

代码中的所有部分都没有包含 div。

如果此片段具有 h1,则会更改背景。

[请注意,截至发帖时,Firefox 默认不支持 :has,用户必须更改设置]。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

section {
  background-color: hotpink;
  width: 500px;
  height: 500px;
  margin: 10px;
}

section:has(h1) {
  background-color: blueviolet;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section>
    <h1></h1>
  </section>
  <section></section>
  <section></section>
  <section></section>
</body>

</html>

© www.soinside.com 2019 - 2024. All rights reserved.