（不）具有特定子类的样式容器

Question

所以我正在使用primeng 构建一个角度应用程序来构建用户界面。 我正在尝试重新设置 p-menu 组件的样式，主要是列表项的外观，问题是我正在尝试设置非活动项的样式，但活动类仅添加到链接而不是列表项。 这意味着我无法设置列表项的样式，因为不支持 :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;
}

但是它们都不能正常工作，有什么想法可以设置这个样式吗？

提前致谢！

更新 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 或至少不像其他人那样多。

Answer 1

虽然 CSS 不会“备份”来让您设置祖先的样式，但您可以在元素（在本例中为锚点）上放置一个伪元素并定位该绝对元素并让它采用 li 的尺寸如果它被定位。

这个 sn-p 只是将所有相关的 lis 移动 60px 并带有 margin-left 然后将活动的 lis 移动到 30px 但还在链接上放置一个伪元素，该元素向后延伸一点并为其着色。

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

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>