Html CSS:阻止父元素获取：单击子元素时激活伪类

单击

按钮

时，您会看到父

div

会触发

：active

伪类。是否有一种纯CSS（或一些JS库）方式来

：active

pseudo类不切换

按钮

单击

我尝试了

z-index

，

位置：绝对和固定

，但没有成功。

来自：

选择器不定义“：active”或“：hover”元素的父元素是否也处于该状态

这意味着它依赖于实现。如果一个实现选择了这种方式（正如当前的浏览器所做的那样），那么标准中没有任何东西可以改变这一点

使用CSS4，您可以执行以下操作：

.parent:active:not(:has(:active)) {
   color: red;
}

---

但这既不可用，也没有最终确定。

这里有一个jquery解决方案，而不是使用css伪类

：active

$（文档）.ready（函数（）{
$（“按钮”）.mousedown（函数（e）{
e、 停止传播（）；
log（“我被点击了”）；
});
$（'div'）.mousedown（函数（e）{
$（'div'）.css（'background'，'red'）
}).mouseup（函数（e）{
$（'div'）.css（'background'，'#eee'））
});
$（文档）.mouseup（函数（e）{
$（'div'）.css（'background'，'#eee'））
});
});
div{
宽度：200px；
高度：200px；
背景色：#eee；
边框：1px纯黑；
}

请叫我
如果您真的只想用CSS解决这个问题：

如果您的按钮处于活动状态，请在伪元素前面添加一个
：并带有
位置：绝对在之前提供与父母相同的背景

button:active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eee;
    z-index: -1;
}

现在所需要的是，父对象是：

position: relative;
z-index: 0;

看看：

这并不能解决根本问题，但可以解决您当前的问题。
也许实现您真正想要做的事情的最简单方法是不要将按钮放在您不想激活的
div中

在这里，您有一个容器
div
，其中包含一个背景
div
（相当于原始示例中的父
div
）。背景
div
具有与按钮分开的活动状态


.container{
位置：相对位置；
宽度：200px；
高度：200px；
}
.背景{
位置：绝对位置；
宽度：100%；
身高：100%；
边框：1px纯黑；
背景色：#eee；
}
.背景：活动{
背景色：红色；
}
钮扣{
位置：相对位置；
}

点击我！
而不是
div:active{…}
你应该编码
div:active:not（：hover）{…}
并且
背景色保持不变

（已删除旧代码段）

更新

为了保持主
div
行为的完整性和更通用的方法，我通常创建几个层

检查下面的代码段，切换到
绿色
只是为了证明它可以工作，而
定位
和
abolute
现在只是又快又脏：


#图层数据{
宽度：200px；
高度：200px；
背景色：#eee；
边框：1px纯黑；
}
#图层数据：活动{
背景颜色：红色
}
#层基站：活动{
背景颜色：绿色
}
#层基站{
z指数：1；
位置：绝对位置；
顶部：1px；
左：1px；
背景：透明；
填充物：5px；
宽度：自动；
高度：自动
}
#图层数据{
z指数：0；
位置：绝对位置；
排名：0；
左：0；
文本对齐：居中；
线高：200px
}

请叫我


我也喜欢


给我三个
一些数据层
据我所知，活动状态将出现气泡。因此，所有父节点都将处于活动状态

因此，我现在不需要一个纯CSS解决方案。通过改变标记，使具有活动状态的div不再是按钮的父级，可以避免使用javascript解决方案（我认为这才是您真正想要的）。例如，你可以让他们成为兄弟姐妹

该解决方案的CSS部分随后将修复布局，使其看起来与它们在父级>子级时所做的相同

如果看不到您正在使用的工具，恐怕我无法为您提供更具体的解决方案。
试试这个

html:

jquery：

$("#btnclick").click(function(){
    $("#current").toggleClass("current_active");
});


ps:include jquery库文件
当用户激活某个元素时，:active伪类将应用。例如，在用户按下鼠标按钮和释放鼠标按钮之间。在具有多个鼠标按钮的系统上，：active仅适用于主或主激活按钮（通常为“左”鼠标按钮）及其任何别名

可能存在文档语言或特定于实现的限制，在这些限制下，元素可以变为：活动。例如，[HTML5]定义了可激活元素的列表

匹配：active的元素的父元素也匹配：active。
所以，没有办法
似乎没有任何CSS方法来处理这种情况。（Amit建议的方法是不确定CSS4。）下面是JQuery方法

其思想是在3个级别处理mousedown和mouseup事件：

父div
不希望将活动状态传播到父div的按钮（以下示例中的“.btn1”）
除第二种情况下的按钮外的任何其他子项。（.下例中的“.btn2”）

HTML:

CSS:

CSS伪元素非常有用——它们允许我们为工具提示创建CSS三角形，并执行许多其他简单任务，同时防止需要额外的HTML元素。到目前为止，JavaScript无法访问这些伪元素CSS属性，但现在有了一种获取它们的方法

检查th
div {
  width: 200px;
  height: 200px;
  background-color: #eee;
  border: 1px solid black;
}
.current_active{
  background-color: red;
}

$("#btnclick").click(function(){
    $("#current").toggleClass("current_active");
});

<div>
  <button class="btn1">Qlick me1</button>
  <button class="btn2">Qlick me2</button>
</div>

$(function(){
    $('div').each(function(e){
        $(this).mousedown(function(e){
            $(this).addClass("activeClass");
        }).mouseup(function(e){
            $(this).removeClass("activeClass");
        });
    });
    $('div .btn1').each(function(e){
        $(this).mousedown(function(e){
            e.stopPropagation();
        }).mouseup(function(e){
            e.stopPropagation();
        });
    });
    $('div :not(.btn1)').each(function(e){
        $(this).mousedown(function(e){
            $(this).parent().addClass("activeClass");
        }).mouseup(function(e){
            $(this).parent().removeClass("activeClass");
        });
    });
});

div {
  width: 200px;
  height: 200px;
  background-color: #eee;
  border: 1px solid black;
}
.activeClass {
  background-color: red;
}

.parent {
  transition: background-color;
}
.parent:active:not(:focus-within) {
  background-color: red;      
  transition-delay: 1ms; // Delay one cycle to allow child to focus 
}

.parent {
  transition: background-color;
}
.parent:active:focus {
  background-color: red;      
}

.parent {
  transition: background-color;
}

.parent[tabindex]:active:focus {
  background-color: red;
}

.parent:active:not(:focus):not(:focus-within) {
  background-color: red;
  transition-delay: 1ms;
}