在CSS和本機Javascript中選擇沒有任何子元素的父元素

Question

首先，CSS

我只想選擇父元素，而不選擇其任何子元素。 不確定如何執行； 我已經嘗試過:not()偽類，但沒有用。

在這種情況下，我這樣做是因為我想降低懸停時手風琴的父級的亮度。

無需嘗試隔離父級，它類似於：

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

但是，這也會導致其所有子項也變暗。 由於我也有一些后來.parent的內部類.parent類，鼠標放在他們會加倍的效果。

相反，我只想讓父母變黑。 我該如何實現？

注意：我還沒有像.parent:hover:not(.parent *)無法正常工作。

和Javascript（本機）

這些.parent元素也是手風琴，它們基於通過Javascript中的單擊偵聽器在其上切換active類而起作用。 當然，這意味着我在單擊.parent元素的.parent元素時以與亮度起作用相同的方式激活了手風琴。

因此，我如何a）將單擊偵聽器添加到具有.parent類而不是其子元素的元素中，或b）檢查是否單擊了.parent -classed元素中的子元素來觸發偵聽器？

當前代碼：

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問題。

如果您在父元素上設置樣式，則是在對父元素進行樣式設置，並且由於默認的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 *規則，則默認情況下background-color是透明的。 您可以考慮將div *或*設置為重置默認值。 然后，只有您的父選擇器正在更改，而子代保持不變。

替代解決方案

還有另一種解決方案，這有點古怪，但是可以。 您可以將兩個div編碼為body下的兄弟姐妹，而不是父子關系，並使用定位將第二個div放置在第一個div內。 這是一個工作的小提琴，代表了這一點。 http://jsfiddle.net/404_Error/td13ophq/