[英]How do I select the the grand-children DOMs with the same class (SaSS)
<li className={styles.option}>
<div>Hi
<ul>
<li className={styles.option}> /*** I want these two li DOMs as 'blue'
<div>Hi
<ul>
<li className={styles.option}>
<div>Hi</div>
</li>
</ul>
</div>
</li>*****************************************/
</div>
</ul>
</li>
I tried many ways but it didn't work我尝试了很多方法,但没有奏效
.option {
background-color: 'yellow'
&:has(.option) {
background-color: 'blue'
}
}
This would make the first li with the option class blue, and the second one yellow:这将使选项类的第一个 li 为蓝色,第二个为黄色:
.option {
background-color: blue;
.option {
background-color: yellow;
}
}
If you want to do this without changing the option class on your parent <li>
you can use the solution below.如果您想在不更改父
<li>
上的选项类的情况下执行此操作,则可以使用以下解决方案。
li:nth-child(2) { background: blue; } li:nth-child(3) { background: blue; }
<li> <div>Outside <li class="option"> <div>Middle <li class="option"> <div>Inside</div> </li> </div> </li> </div> </li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.