CSS：阻止父元素获取：单击子元素时的活动伪类 [英] CSS: Prevent parent element getting :active pseudoclass when child element is clicked
问题描述
JSFiddle
点击按钮，您会看到：active 父类触发的伪类 div 。是否有的纯CSS （或某些JS库）方式：active pseudoclass不在按钮上切换 click？
When you click the button, you see that :active pseudoclass is triggered for the parent div. Is there a pure CSS (or some JS library) way of :active pseudoclass not toggling on button click?
我尝试了 z-index ， position：absolute&固定且无成功。
推荐答案
从 spec ：
t定义元素的父级是：active还是：hover也处于该状态。
Selectors doesn't define if the parent of an element that is ‘:active’ or ‘:hover’ is also in that state.
它的实现依赖。如果一个实现选择这样做（如当前的浏览器显然做的），标准中没有什么可以改变这一点。
That means it's implementation dependent. If an implementation chose to act this way (as current browsers obviously do), there's nothing in the standard that can change that.
使用CSS4，你可以做：
With CSS4, you might be able to do:
.parent:active:not(:has(:active)) {
color: red;
}
但尚未完成。
这篇关于CSS：阻止父元素获取：单击子元素时的活动伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
