两路子路与条件造型

Question

我有个案子：

<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>

我需要使.content具有边框半径: 6px时.p-高亮显示不与第一个li，而.content使其具有边框半径: 0px 0px6px6px当.p-高亮显示与第一li合并时。

这有可能吗？

Answer 1

是的，使用以下规则是可能的，但您需要知道:has()伪类并不是所有浏览器(例如firefox、Opera、Chrome等)都完全支持的，您可以在caniuse.com上检查兼容性。

注意:我还向.content添加了一个边框，这样您就可以看到效果了。

​

.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>

​