如何使用 SASS 设置引导 aria-expanded 属性的样式

Question

我正在尝试使用 SASS 设置 accordion-header 类的 bootstrap 4 aria-expanded 属性。

有可能吗？

HTML代码：

<div class="accordion">
    <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
        Slide Title
    </div>
    <div class="accordion-body collapse" id="collapse_1" style="">
        This is the first slide. 
    </div>
</div>

SASS 代码::

.accordion{
    .accordion-header{
        position: relative;
        padding: 1rem;

        font-size: 18px;
        font-weight: bold;

        &.[aria-expanded="true"]{
          background-color: red;
        }
    }
}

Answer 1

我发现要定位 aria-expanded 属性，我只需删除选择器之前的点，因此我已经更改了以下代码：

&.[aria-expanded="true"]{
  background-color: red;
}

到这里：

&[aria-expanded="true"]{
   background-color: red;
}