CSS 选择器不工作 (~)

Question

CSS 选择器不工作 (~)

我正在学习 CSS 并试图找出一种方法，当您将鼠标悬停在页面上的标题元素上时，使正文的背景颜色发生变化。我试图使用每个选择器，但它不起作用！谁能帮我找出我的问题？这是我的代码：

<html>

 <style>


  #header {
   text-align: center;
   position: relative;
  }

  #header:hover ~ .body{
   background-color: blue;
  }

  .body{
   background-color: purple;
  }


 </style>

 <body class="body">

  <div id="header">
   <font size="16">My Header</font>
  </div>

 </body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*l_B 6

在您拥有的代码中，您尝试做的实质上是选择一个父元素。

换句话说，body是的父级div#header，并且您试图body在其子级悬停时进行选择。

在 CSS 中，无法选择元素的父级。CSS 不是这样工作的。

您可以在此处阅读有关此限制的更多信息：是否有 CSS 父选择器？

您尝试使用的选择器 (~) 称为通用同级选择器，它匹配共享相同 parent 的元素。

在此处阅读更多相关信息：MDN 上的一般同级选择器。

如果您真的想选择一个父元素，您可以查看 Javascript / jQuery 解决方案。

有关为什么CSS 中没有父选择器的有趣阅读，请访问：CSS-Tricks 上的 CSS父选择器。

如需 CSS 选择器的完整列表，请访问：W3C 选择器级别 3。

归档时间：	10 年，5 月前
查看次数：	10106 次
最近记录：	10 年，5 月前