我正在学习 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>
最佳答案
在您的代码中，您尝试做的实际上是选择一个父元素。
换句话说，body 是 div#header 的父级，您正试图在悬停其子级时选择 body。
在 CSS 中，无法选择元素的父元素。CSS 不能那样工作。
您可以在此处阅读有关此限制的更多信息:Is there a CSS parent selector?
您尝试使用的选择器 (~) 称为通用兄弟选择器，它匹配共享相同父级的元素。
在这里阅读更多相关信息:General sibling selectors在 MDN 上。
如果您真的想选择一个父元素，您可以查看 Javascript/jQuery 解决方案。
有关 为什么 CSS 中没有父选择器的有趣阅读，请访问:Parent Selectors in CSS关于 CSS 技巧。
有关 CSS 选择器的完整列表，请访问:W3C Selectors Level 3 .
关于html - CSS 选择器不工作 (~)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32620690/