使用SASS使用:has根据子属性更改父伪元素

时间:2018-07-16 08:59:50

标签: html css sass

我试图根据子元素是否具有特定属性来更改元素的伪内容。

例如,我想根据引导可折叠div是否具有属性aria-expanded="true"显示不同的字体真棒图标。

HTML

   <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" href="#month1">01/01/2001 - 01/02/2001</a>
                </h5>
            </div>
            <div id="month1" class="panel-collapse collapse">
                <div class="panel-body">
                    test
                </div>
            </div>
        </div>
    </div>

如何根据子a标签是否具有特定属性来更改h5伪内容?

我原以为这样的事情会起作用

.panel-heading {
  h5:has(> a[aria-expanded="true"]){
    &::after {
      content: "\f055";
      font-family: FontAwesome; 
      float:right; 
    }   
  }
}

但是它似乎什么也没做。在我的SASS代码中使用:has选择器无法执行任何操作。

例如,简单的东西

 h5:has(a){
    &::after {
      content: "\f055";
      font-family: FontAwesome; 
      float:right; 
    }   
  }
}

甚至无法正常工作。

在Sass中使用:has的正确方法是什么?

0 个答案:

没有答案