css - 相当于 $(this) 的 CSS 选择器

Question

是否有与$(this)CSS 中的 Jquery 选择器等效的功能？像这样：

.widget h4 { background: black }
.widget:hover h4 { background: white }

在这种情况下，如果将任何分类.widget元素悬停在上面，则子元素h4将更改背景颜色。我在问CSS中是否有一种方法可以做到这一点，以便只有h4单个悬停的.widget具有 bg 颜色变化，而不是每个带有 class 的元素.widget。是的，我在谷歌上搜索过，没有找到任何答案。谢谢您的帮助。

Answer 1

您发布的代码应该完全按照您描述的方式执行您希望它的行为：

CSS：

.widget h4 { background: red }
.widget:hover h4 { background: white } 

html:

<div class="widget">
   <h4>Hover here</h4>
   <h3>This won't change</h3>
</div>

<div class="widget">
    <h4>Hover here</h4>
</div>

使用该代码，如果您将鼠标悬停在其中一个 div 上.widget，它只会更改直接子元素，h4而不是另一个 div 中的子元素。

看到这个jsfiddle