两条路线子和条件样式

Question

I got this case:

<div class="parent">
    <div class"routeA">
        <div class="header">
            <li></li>
            <li class="p-highlight"></li>
            <li></li>
        </div>
    </div>
    <div class="routeB">
        <div class="content">
        </div>
    </div>
</div>

I need to make.content to have border-radius: 6px when.p-highlight is not with first li, and.content to have border-radius: 0px 0px 6px 6px when.p-highlight is combined with first li

Is this even possible?

Answer 1

Yes, it's possible with the following rule but you need to be aware that the:has() pseudo class is not fully supported by all browsers (eg firefox, Opera, Chrome for Android etc) You can check compatibility at caniuse.com

Note: I've also added a border to.content so you can see the effect.

 .content { border: 1px solid black; border-radius: 6px; }.parent:has(li:first-child.p-highlight).content { border-radius: 0 0 6px 6px; }

 <div class="parent"> <div class="routeA"> <div class="header"> <li class="p-highlight">One</li> <li>Two</li> <li>Three</li> </div> </div> <div class="routeB"> <div class="content"> Content </div> </div> </div>