参考SCSS中一个级别的两个不同的类

Question

我有一个像这样构建的手风琴：

    <div class="panel">
       <div class="panel-heading"></div>
       <div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
   </div>

CSS构建如下：

.panel{
       .panel-heading{}
       .panel-content{}
}

问题：

当panel-content是collpase / collapse时，我需要更改panel-heading中的css。

当他们处于同一水平时甚至可能吗？

Answer 1

可以在相同的深度级别定位之后的元素，而不是之前的。使用此HTML（切换元素）：

<div class="panel">
    <div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
    <div class="panel-heading"></div>  
</div>

你可以这样做：

.panel {
    .panel-heading {}
    .panel-content {
        &.collapse.in + .panel-heading {
            // Changes here
        }
    }
}

更好的方法（IMO）就是在容器上使用你的collapse类：

<div class="panel collapsed">
    <div class="panel-heading"></div> 
    <div class="panel-content"></div> 
</div>

Sass：

.panel {
    .panel-heading {}
    .panel-content {}
    &.collapsed {
        .panel-heading {
            // Changes here
        }
    }
}

但我完全清楚，由于框架限制，这并不总是可行的。

Answer 2

这是可能的，但不是你现在构建HTML的方式。你可以像这样瞄准兄弟姐妹：

.bother + .sister {
  color: red;
}

这会导致.sister元素旁边的任何.brother元素都有红色文字。你也可以使用~而不是+，所以它不是一个亲密的兄弟，而是一个只是在树的下方，但仍然是兄弟姐妹。问题是，这只能以一种方式运作。因此，.panel-content无法回顾并查看其上方的兄弟姐妹是否与选择器匹配。