css：更改子 div 的背景颜色，但不更改父 div答案

【问题标题】：css: change background color of child-div but not parent divcss：更改子 div 的背景颜色，但不更改父 div
【发布时间】：2018-10-02 07:50:03
【问题描述】：

我有一个包含三个子 div 的 div。

<div class="parent">
  <div class="child"> something </div>
  <div class="child"> something </div>
  <div class="child"> something </div>
</div>

这是我们需要的：

点击父级，父级div得到不同的background-color和:active 点击一个孩子，孩子的 div 获得不同的背景颜色：活动

问题：当点击孩子时，父母和孩子都变得活跃，并且都得到不同的background-color。

我尝试使用:active:not(:matches(parent))，但没有成功。

如果没有 Jquery，这是否可以解决？如果可以，如何解决？

【问题讨论】：

你能提供你试过的CSS吗？
如果没有 Javascript、超链接或表单元素，您将无法检测到点击。
toggle div color on click的可能重复

标签： html css

【解决方案1】：

我解决了。

由于 div 上的点击本身已经由 jquery 处理，并且在这里的一篇帖子的帮助下（再也找不到它），我设法解决了这个问题。

当点击 div 时，我会在设置 window.href 之前向 div 添加一个名为“actief”的类。

$(this).addClass('actief');

然后我在 css 中添加了这个：

.parent.actief {
   background-color: red;
}
.child.actief {
   background-color: blue;
}

由于点击重定向到一个新页面，颜色只设置了几毫秒。

感谢所有帮助和建议。

【讨论】：

我以为你不会使用 jquery？
嗯，是的，这不是你对我们的要求
我的意思是不使用 jquery 来进行 css 更改，因为它们集中在 sass 文件中。通过在上面放一个类，我可以使用 css。

【解决方案2】：

您可以使用:focus 和tab-index 更改其背景

.child{
  padding: 5px;
}
.child:focus{
  background-color: green;
  color: #FFF;
}

<div class="parent">
  <div class="child" tabindex="1"> something </div>
  <div class="child" tabindex="2"> something </div>
  <div class="child" tabindex="3"> something </div>
</div>

【讨论】：

【解决方案3】：

您需要使用stopPropagation()，它也不会将点击事件传递给父级

$(".parent").click(function() {
  $(this).css("background-color", "#E1F3F7");
})

$(".child").click(function(event) {
  event.stopPropagation();
  $(this).css("background-color", "#E7F7E1");
})

.parent {
  background-color: #e5e5e5;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child"> something </div>
  <div class="child"> something </div>
  <div class="child"> something </div>
</div>

【讨论】：

【解决方案4】：

如果你能够添加一个新的子元素，你可以尝试这样的事情..

.parent {
  position: relative;
  padding: 50px;
  background-color: grey;
}
.parent:active {
  background-color: red;
}
.child {
  position: relative;
  z-index: 2;
}
.child:active {
  background-color: blue;
}
.underlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  background-color: grey;
  z-index: 1;
}
.child:active ~ .underlay {
  display: flex;
}

<div class="parent">
  <div class="child"> something </div>
  <div class="child"> something </div>
  <div class="child"> something </div>
  <div class="underlay"></div>
</div>

小提琴

https://jsfiddle.net/Hastig/jsr9e7hd/

【讨论】：