替代解决方案

Question

首先，CSS

我只想选择父元素，而不选择其任何子元素。不确定如何执行；我已经尝试过:not()伪类。

在这种情况下，我这样做是因为我想降低悬停时手风琴的父级的亮度。

无需尝试隔离父级，它类似于：

.parent:hover {
  filter: brightness(85%);
}

但是，这也会导致其所有子项也变暗。由于我在.parent类中还有一些稍后的.parent类，因此将鼠标悬停在它们上会使效果加倍。

相反，我只想让父母变黑。我该如何实现？

注意：我还没有像.parent:hover:not(.parent *)这样的东西可以工作。

和Javascript（本机）

这些.parent元素也是手风琴，它们的工作原理是通过Javascript中的单击侦听器在它们上切换active类。当然，这意味着我在点击.parent元素上的手风琴时，其激活方式与亮度相同。

所以我如何a）将点击侦听器添加到具有.parent类而不是其子元素的元素中，或b）检查是否单击了.parent分类元素中的子元素触发听众？

当前代码：

var accordians = document.getElementsByClassName("accordian");
var i;
for (i = 0; i < accordians.length; i++) {
  accordians[i].addEventListener("click", function() {
    var acc = this;
    acc.classList.toggle("active");
    // sitelist-container elements are "expanded" when the accordions are clicked
    var sitelist = acc.getElementsByClassName("sitelist-container")[0];
    if (sitelist.style.display == "") {
      sitelist.style.display = "block";
    } else {
      sitelist.style.display = "";
    }
  });
}

对于CSS或Javascript的任何帮助，将不胜感激。

编辑：感谢您提供有关使用背景色而不是亮度滤镜的反馈。使用此策略时，总体上看起来更好。

但是，我仍然有一个问题……该如何做才能使这种样式仅在将鼠标悬停在父元素而不是其子元素上时才发生？这是完全有可能的，还是我应该从根本上重新设计如何解决这个问题？

Answer 1

对于您的CSS，不幸的是，您无法在不过滤子级的情况下过滤父级。因此，我们将以background-color来思考类似的问题。

如果您在父元素上设置样式，则它是在对父元素进行样式设置，并且由于default background-color是透明的，因此似乎就像其余元素的颜色一样，但是不是。但是，通过调整默认值或简单地将相同属性设置为其他值，您将看到问题已解决。看下面的例子：

div * {
  background-color: white;
}

div {
  background-color: red;
  border: 1px solid black;
}

<div>
  <p>
  This is a paragraph about life. Life is 42. This is from the Hitchhiker's guide to the Galaxy. 
  </p>
  <p>
   This is another paragraph.
  </p>
</div>

没有div *规则，背景颜色默认为透明。您可以考虑将div *或*设置为重置默认值。然后，只有您的父选择器正在更改，子代保持不变。

替代解决方案

还有另一种解决方案，虽然有点古怪，但是可以。您可以编写两个div下的兄弟姐妹body而不是子对父母关系，并使用定位将第二个div放置在第一个div内。这是一个工作的小提琴，代表了这一点。 http://jsfiddle.net/404_Error/td13ophq/

在CSS和本机Javascript中选择没有任何子元素的父元素

首先，CSS

和Javascript（本机）

1 个答案:

替代解决方案