我试图根据子元素是否具有特定属性来更改元素的伪内容。
例如,我想根据引导可折叠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
的正确方法是什么?