Question

我有div :active选择器效果，此div包含一个小div的子项，其中包含一些按钮

现在 - 当然 - 当点击父div时，将触发:active效果，但是当点击child-div中的一个按钮时，同样的事情也会发生，是我不想要的，（感觉客人点击了按钮和父div，非常讨厌）

我想要的是：:active效果仅在单击父div时触发，而不是在单击child-div中的某个元素时触发。可能吗？我不介意使用JS或jQuery。

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

＆＃13;

#parent-div {
  border: 1px solid black;
  width: 300px;
  height: 300px;
}
#parent-div:active {
  border: 3px solid red;
}
#child-div {
  position: absolute;
  top: 20px;
  left: 20px;
}

＆＃13;

<div id="parent-div">
  <div id="child-div">
    <button>Hello</button>
  </div>
</div>

＆＃13;

Answer 1

这只能通过CSS来实现：

#parent-div:active:not(:focus-within) {
  border: 3px solid red;
}

可悲的是，:focus-within并未得到广泛支持，但您可以使用JS polyfill。

#parent-div {
  border: 1px solid black;
  width: 300px;
  height: 300px;
}
#parent-div:active:not(.focus-within) {
  border: 3px solid red;
}
#child-div {
  position: absolute;
  top: 20px;
  left: 20px;
}

<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div id="parent-div">
  <div id="child-div">
    <button>Hello</button>
  </div>
</div>

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

1 个答案: