在scss中如何根据条件选择孩子？

Question

我有下一个html代码。框架(Odoo-15，widget=“优先级”)是自己生成的，所以我不能在这里做任何更改。

<div role="radiogroup" class="o_priority o_field_widget" name="priority" aria-label="Пріоритет">
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="false" title="Низький" aria-label="Низький" tabindex="-1" data-index="1" ></a>
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="false" title="Звичайний" aria-label="Звичайний" tabindex="-1" data-index="2" ></a>
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="false" title="Високий" aria-label="Високий" tabindex="-1" data-index="3" ></a>
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="true" title="Критичний" aria-label="Критичний" tabindex="0" data-index="4" ></a>
    <a class="o_priority_star fa fa-star-o" href="#" role="radio" aria-checked="false" title="Невідкладний" aria-label="Невідкладний" tabindex="-1" data-index="5" ></a>
</div>

我可以使用scss，接下来我想做的是：

如果<div>有带有属性[aria-checked="true"][data-index="4"]的子<a>，那么将style：color: red应用于他的带class="o_priority_star fa fa-star"的所有子类<a>

怎么做？

Answer 1

您的要求可以这样做，默认将所有的颜色设置为红色，然后选择当前选定的星星并设置要继承的颜色或任何您想要的颜色，还可以使用css选择器~选择相邻的星星并以相同的方式继承颜色。请检查下面的例子！

​

div > a[aria-checked="true"] {
color: inherit !important;
}  

div > a[aria-checked="true"] ~ a.o_priority_star.fa.fa-star-o {
color: inherit !important;
}

div > a[aria-checked="true"] ~ a.o_priority_star.fa.fa-star {
color: inherit !important;
}


a.o_priority_star.fa.fa-star {
 color: red;
}

<div role="radiogroup" class="o_priority o_field_widget" name="priority" aria-label="Пріоритет">
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="false" title="Низький" aria-label="Низький" tabindex="-1" data-index="1" ></a>
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="false" title="Звичайний" aria-label="Звичайний" tabindex="-1" data-index="2" ></a>
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="false" title="Високий" aria-label="Високий" tabindex="-1" data-index="3" ></a>
    <a class="o_priority_star fa fa-star" href="#" role="radio" aria-checked="true" title="Критичний" aria-label="Критичний" tabindex="0" data-index="4" ></a>
    <a class="o_priority_star fa fa-star-o" href="#" role="radio" aria-checked="false" title="Невідкладний" aria-label="Невідкладний" tabindex="-1" data-index="5" ></a>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

​