首先，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的帮助将不胜感激。
编辑： 感谢您提供有关使用背景色而不是亮度滤镜的反馈。使用此策略时，实际上整体看起来更好。
但是，我仍然有一个问题...如何使此样式仅在我将鼠标悬停在父元素而不是其子元素上时才发生？这是否可能，或者我应该从根本上重新设计我解决这个问题的方式？
对于您的 CSS，不幸的是，如果不过滤子项，您将无法过滤父级。因此，我们将反思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/