Question

我有一些嵌套元素，CSS在活动时控制外观。

.test {
  background: red;
}

.test:active {
  background: blue;
}

<div class="test" id="A">
  This is part A.
  <div class="test" id="B">
    This is nested part B.
  </div>
</div>

问题是，当我在嵌套的DIV（B）上鼠标按下时，A和B都会改变颜色，而不仅仅是B.

我尝试捕获鼠标按下事件并停止传播：

document.getElementById("B").addEventListener("mousedown", function(event) {
    event.stopPropagation()
})

当我这样做时，我发现没有调用“A”的mousedown事件处理程序。但是，在捕获的事件被触发时，“A”元素已经将其外观更改为活动状态！

如何实施仅允许实际上最嵌套的元素一次处于活动状态？当它处于活动状态时（鼠标按下），我仍然需要“A”来更改背景，但是当“B”处于活动状态时，我不需要。

Answer 1

在这种情况下，您可以使用此选择器：

.test > .test:active {
  background: blue;
}

Answer 2

这可以通过JavaScript来完成，JavaScript将检查给定元素是否具有.test类的任何子元素。将来可以使用:has() CSS选择器完成此操作，但在任何浏览器中都没有样式表支持。

以下演示只有在＃34;最嵌套的＆＃34;给定结构中的.test元素，我相信这就是您所寻找的。

如果您有任何问题，请与我们联系。

＆＃13;

document.querySelectorAll(".test").forEach(function(elem) {
  elem.addEventListener("mousedown", function (event) {
    event.stopPropagation();
    event.preventDefault();
    if (!event.target.querySelector(".test")) {
      event.target.classList.add("active");
    }
  });
  elem.addEventListener("mouseup", function (event) {
    event.stopPropagation();
    event.preventDefault();
    document.querySelectorAll(".active").forEach(function (elem) {
      elem.classList.remove("active");
    });
  });
});

＆＃13;

.test {
  background: red;
}
.active {
  background: blue;
}

＆＃13;

<div class="test" id="A">
  This is part A.
  <div class="test" id="B">
    This is nested part B.
  </div>
</div>

<div class="test" id="C">
  This is part C.
</div>

<div class="test" id="D">
  This is part D.
  <div class="test" id="E">
    This is nested part E.
    <div class="test" id="F">
      This is nested-nested part F.
    </div>
  </div>
</div>

＆＃13;

<强> ---- ---- EDIT

在澄清之后，您似乎真的不在乎最嵌套的＆＃34;最嵌套的＆＃34;元素是唯一变得活跃的东西，你真正想要的只是被淹没的单个元素才能变得活跃。如果是这种情况，它实际上更简单。代码看起来像这样：

document.querySelectorAll(".test").forEach(function(elem) {
  elem.addEventListener("mousedown", function(event) {
    event.stopPropagation();
    event.preventDefault();
    event.target.classList.add("active");
  });
  elem.addEventListener("mouseup", function(event) {
    event.stopPropagation();
    event.preventDefault();
    document.querySelectorAll(".active").forEach(function(elem) {
      elem.classList.remove("active");
    });
  });
});

如何一次只允许最嵌套的元素处于ACTIVE状态？

2 个答案: