如何使用SASS设置Bootstrap aria扩展属性的样式

Question

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

有可能吗？

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;
}