CSS:阻止父元素获取:单击子元素时的活动伪类 [英] CSS: Prevent parent element getting :active pseudoclass when child element is clicked
问题描述
JSFiddle
点击按钮
,您会看到:active
父类触发的伪类 div
。是否有的纯CSS (或某些JS库)方式:active
pseudoclass不在按钮上切换
点击?
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&固定
,但未成功。
I tried z-index
, position: absolute & fixed
and no success.
推荐答案
spec :
选择器不定义父项':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屋!