使用选择器后没有看到变化

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

关于问题

嗨，我是 CSS 新手，最近我发现了 

has
选择器。毫无帮助的是，当我想测试这个选择器时，我没有看到任何变化。我真的不知道为什么。我在网上找不到答案所以我在这里问。

代码

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <section>
            <h1></h1>
        </section>
        <section></section>
        <section></section>
        <section></section>
    </body>
</html>

CSS

*{
    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;
}
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.