Html 子元素的css活动选择器异常

我有一个

div

，具有

：激活的

选择器效果， 此

div

包含一个子

div

，其中包含一些按钮

现在-当然-当单击父

div

时，会触发

：active

效果，但是当单击子div中的一个按钮时，同样的事情会发生，这是我不想要的，（感觉客人同时单击了按钮和父

div

，非常烦人）

我想要的是：只有在单击父

div

时，才会触发

：active

效果，而不是在单击子div中的某个元素时。 可能吗？我不介意使用JS或jQuery

在下面的示例中，无论单击div还是其中的按钮，边框都会变为红色：

#父div{
边框：1px纯黑；
宽度：300px；
高度：300px；
}
#父分区：活动{
边框：3倍纯红；
}
#儿童部{
位置：绝对位置；
顶部：20px；
左：20px；
}

你好

这只能通过CSS实现：

#父div:active:not（：焦点在内）{
边框：3倍纯红；
}

遗憾的是，它没有得到广泛支持，但您可以使用

#父div{
边框：1px纯黑；
宽度：300px；
高度：300px；
}
#父div:活动：非（.focus-in）{
边框：3倍纯红；
}
#儿童部{
位置：绝对位置；
顶部：20px；
左：20px；
}

你好

您的代码在哪里？抱歉，我更新了问题。谢谢您，它成功了！（由于某种原因，你发布的代码片段在chrome上不起作用（它在firefox上起作用），但在我的网站上起作用）@MotassemMK-True，chrome说

拒绝执行来自https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/'因为其MIME类型（'text/plain'）不可执行，并且启用了严格的MIME类型检查

。我不知道如何请求github提供正确的MIME类型，但是将代码复制到服务器应该可以。是的，这就是我所做的，并且它可以工作，谢谢。

：专注于
-webkit