为父级中的一个div创建SCSS，并与另一个子div建立关系

Question

我想为特定的div指定一个CSS规则(使用SASS/SCSS(，如下所示，

<div class="parent-div">
<div class="first-child has-this-class">
......
</div>
<div class="second-child">
.....
</div>

我需要编写一个特定的CSS规则；第二个孩子"；，当第一个孩子有"班"时；有这个类"；。

我试着这样使用SCSS，但没有成功。

.parent-div{
.first-child{
&.has-this-class + .second-child{
//Write the styles here
}
}
}

Answer 1

你可以试试这个

.parent-div{
.first-child:has(.second-child){
//Write the styles here
}
}

但是：并非所有浏览器都支持has((选择器。我可以使用吗

Answer 2

此代码将影响第一个子和第二个子

.parent-div {
.first-child {
&.has-this-class,
+ .second-child {
width: 200px;
height: 200px;
background-color: crimson;
}
}
}