样式容器（不）具有特定 child class

Question

所以我正在使用 primeng 开发 ui 开发一个 angular 应用程序来开发 ui 开发 ui。我正在尝试重新设置 p-menu 组件的样式，主要是列表项的外观，问题是我正在尝试设置不活动的项的样式，但活动的 class 仅添加到 link 而不是列表项。这意味着我无法设置列表项的样式，因为不支持 :has。

我尝试使用 2 种不同的方法来设置样式，一种是以正常方式设置所有列表项的样式，另一种是具有活动锚点的列表项以不同方式设置样式。另一种方法恰恰相反，将所有内容都设置为活动的样式并排除那些没有活动锚点的内容。

我试图通过添加边距来验证哪些有效，哪些无效：

.p-menu .p-menuitem:not(.p-menuitem .p-menuitem-link-active) {
  margin-left: 30px;
}
.p-menu .p-menuitem:has(.p-menuitem-link-active) {
  margin-left: 60px;
}

但是其中 none 个工作正常，有什么关于如何设置样式的想法吗？

提前致谢！

更新 1：

这是生成的 html：

<p-menu _ngcontent-igv-c109="" class="ng-tns-c106-2 ng-star-inserted" ng-reflect-model="[object Object]">
  <div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c106-2 ng-animate-disabled p-menu p-component ng-star-inserted" ng-reflect-ng-class="[object Object]">
    <ul class="p-menu-list p-reset ng-tns-c106-2">
      <li class="p-submenu-header ng-tns-c106-2 ng-star-inserted" ng-reflect-ng-class="[object Object]">
        <span class="ng-tns-c106-2 ng-star-inserted">Categories</span>
      </li>
      <li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
        <a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted" ng-reflect-router-link="/manage/buildings" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]" tabindex="0" href="/manage/buildings">
          <span class="p-menuitem-text ng-star-inserted">
            Buildings
          </span>
        </a>
      </li>
      <li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
        <a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted" ng-reflect-router-link="/manage/rooms" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]" tabindex="0" href="/manage/rooms">
          <span class="p-menuitem-text ng-star-inserted">Rooms</span
        </a>
      </li>
      <li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
        <a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted p-menuitem-link-active" ng-reflect-router-link="/manage/devices" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]" tabindex="0" href="/manage/devices">
          <span class="p-menuitem-text ng-star-inserted">
            Devices
          </span>
        </a>
      </li>
    </ul>
  </div>
</p-menu>

我想把li做成下图的样式（颜色会有所不同）：所以我想通过使用 margin-left 让所有常规 li 更靠右，而活动的 li 将像往常一样向左，所以没有 margin-left 是 required 或至少不是和其他人一样多。

Answer 1

尽管 CSS 不会 'back up' 让您为祖先设置样式，但您可以在元素（本例中为锚点）上放置一个伪元素并定位该元素并让它如果 li 已定位，则采用 li 的尺寸。

此代码段仅将所有相关的 lis 移动 60px，然后将活动的 lis 移动到 30px，但还在 link 上放置一个伪前元素，它向后延伸一点并为其着色。

显然，您需要根据其他样式的作用调整定位以使其正确。

ul {
  list-style-type: none;
}

li.p-menuitem {
  position: relative;
  height: 30px;
}

.p-menuitem-link {
  margin-left: 60px;
}

.p-menuitem-link.p-menuitem-link-active {
  margin-left: -30px;
}

.p-menuitem-link-active::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  background-color: beige;
  top: 0;
  left: -10px;
  border-radius: 30px 0 0 30px;
  z-index: -1;
}

<p-menu _ngcontent-igv-c109="" class="ng-tns-c106-2 ng-star-inserted" ng-reflect-model="[object Object]">
  <div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c106-2 ng-animate-disabled p-menu p-component ng-star-inserted" ng-reflect-ng-class="[object Object]">
    <ul class="p-menu-list p-reset ng-tns-c106-2">
      <li class="p-submenu-header ng-tns-c106-2 ng-star-inserted" ng-reflect-ng-class="[object Object]">
        <span class="ng-tns-c106-2 ng-star-inserted">Categories</span>
      </li>
      <li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
        <a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted" ng-reflect-router-link="/manage/buildings" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]"
          tabindex="0" href="/manage/buildings">
          <span class="p-menuitem-text ng-star-inserted">
            Buildings
          </span>
        </a>
      </li>
      <li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
        <a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted" ng-reflect-router-link="/manage/rooms" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]"
          tabindex="0" href="/manage/rooms">
          <span class="p-menuitem-text ng-star-inserted">Rooms</span
        </a>
      </li>
      <li class="ng-tns-c106-2 p-menuitem ng-star-inserted" ng-reflect-item="[object Object]" ng-reflect-ng-class="[object Object]">
        <a role="menuitem" pripple="" class="p-menuitem-link p-ripple ng-star-inserted p-menuitem-link-active" ng-reflect-router-link="/manage/devices" ng-reflect-router-link-active="p-menuitem-link-active" ng-reflect-router-link-active-options="[object Object]" ng-reflect-ng-class="[object Object]" tabindex="0" href="/manage/devices">
          <span class="p-menuitem-text ng-star-inserted">
            Devices
          </span>
        </a>
      </li>
    </ul>
  </div>
</p-menu>

样式容器（不）具有特定 child class

Style containers that (don't) have a certain child class

css

primeng

angular

更新 1：