英文:
Angular :has selector not working correctly
问题
这是我的 HTML 代码：
<ul class="check-list no-bullet-points mb-0">
<ng-container *ngFor="let item of checkList.items">
<li class="d-flex flex-row gap-3 align-items-center" [ngClass]="{ 'checklist-item-bigger': bigger }">
<i class="item-icon fa-solid {{ item.icon }}"></i>
<div class="item-text font-weight-bold">{{ item.text }}</div>
</li>
</ng-container>
</ul>
我正在尝试让 :has 选择器与 Angular 一起工作。以下是我的选择器代码：
.check-list:has(li:nth-child(5)) {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
li {
width: 50%;
flex-shrink: 0;
}
}
然而，这似乎没有效果。ng-container 是否会影响这个选择器？我正在使用 Firefox，但据我所知，Firefox 完全支持 :has 选择器。在我移除选择器的情况下，CSS 本身可以正常工作，但我认为我做错了什么。
英文:
I am trying to get the has selector to work with angular.
This is my HTML:
<ul class="check-list no-bullet-points mb-0">
<ng-container *ngFor="let item of checkList.items">
<li class="d-flex flex-row gap-3 align-items-center" [ngClass]="{ 'checklist-item-bigger': bigger }">
<i class="item-icon fa-solid {{ item.icon }}"></i>
<div class="item-text font-weight-bold">{{ item.text }}</div>
</li>
</ng-container>
</ul>
I am trying to display two rows if there are more than 5 li present. I could assign a new class with [ngClass] but as far as I am aware it should work with pure css.
This is my selector:
.check-list:has(li:nth-child(5)) {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
li {
width: 50%;
flex-shrink: 0;
}
}
However this has no effect. Does ng-container cause issues witht this selector? I am using firefox but as far as I am aware Firefox supports the :has selector fully.
The css itself works fine when I remove the selector, but I think im doing something wrong.
答案1
得分: 0
Firefox默认情况下不支持:has伪类。
它目前在v103版本之后通过标志layout.css.has-selector.enabled进行启用。
您可以在此处查看功能的实现情况链接。
英文:
Firefox doesn't have :has pseudo-class support enabled by default.
It is currently behind the flag layout.css.has-selector.enabled since v103.:
You can follow the feature implementation here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论