Question

我正在试验可能崩溃的Bootstrap.js面板。我想看看是否可以改变面板标题元素的样式，但只有当它与面板折叠元素相邻时才有可能。下面的选择器显然会改变所有标题。

.panel-heading:hover {}

因为我试图向前看，看看目标元素后面是否有特定的类，我不确定我是否能看到CSS是否支持这个。

<!-- This should change style of panel-heading when hovering over the panel-heading element -->
<div class="panel">
    <div class="panel-heading">
    </div>
    <div class="panel-collapse">
    </div>
</div>

<!-- This should NOT change the style of the panel-heading when hovering over the panel-heading element -->
<div class="panel">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
    </div>
</div>

Answer 1

目前无法在CSS3中执行此操作，但CSS Selectors Level 4中提出了一些建议。此功能已被广泛要求。

Relational Pseudo-class: :has()

这样你可以做类似的事情：

.panel:has(.panel-collapse) .panel-heading {

}

含义，将样式应用于包含.panel-heading的{{1}}个类的子类的所有.panel类

这是关于即将推出的CSS Selectors Level 4的一篇很棒的文章：https://www.sitepoint.com/future-generation-css-selectors-level-4/

与此同时，你必须使用像jQuery这样的东西。您可以将.panel-collapse这样的类添加到包含类.panel-hoverable的元素的所有.panel元素

使用CSS：悬停以更改样式，但仅限于与特定类相邻时

1 个答案: