显示与父元素具有相同类名的html子元素并隐藏其他元素

Question

​

<div class="element-2">
  <div class="element-1">
    <p>div 1</p>
  </div>
  
  <div class="element-2">
    <p>div 2</p>
  </div>
</div>

​

我希望父div只显示具有相似类名的子div，并隐藏不匹配的类名子div。

Answer 1

您不能在CSS语法中声明具有相同的类。您可以显式列出它们：

​

div.element-2 > div:not(.element-2) {
  display: none;
}

<div class="element-2">
  <div class="element-1">
    <p>div 1</p>
  </div>
  
  <div class="element-2">
    <p>div 2</p>
  </div>
</div>

​

请注意，这可能有意想不到的副作用：

​

div.element-2 > div:not(.element-2) {
  display: none;
}

<div class="element-2">
  <div class="element-1">
    <p>div 1</p>
  </div>
  
  <div class="element-2">
    <p>div 2</p>
    <div>This is also hidden</div>
  </div>
</div>

​