CSS :not 和 :first-child 用于同一个类

如何解决CSS :not 和 :first-child 用于同一个类

我有一个具有相同类名的 html/css 列表，第一个 X 类有更多类。我需要为第一个 li 项目添加一个红色边框，它没有加号类名称。我不能使用第 n 个元素，因为名为 li 的“product-cat”类的数字有时会发生变化。我尝试了很多组合，但我做不到。有什么想法吗？

<ul>
<li class="product product-cat"></li>
<li class="product product-cat"></li>
<li class="product product-cat"></li>
<li class="product"></li> /*I want to add red border for this li item*/
<li class="product"></li>
<li class="product"></li>
</ul>

解决方法

您应该能够执行以下操作：

.product {
  width: 40px;
  height: 10px;
  background: yellow;
  margin: 4px 0;
}

.product-cat {
  background: green;
}

/**
 * the above code is only for demonstration purposes.
 * please check the code below
 */

.product:not(.product-cat) {
  border: 1px solid red;
}

.product:not(.product-cat) + .product {
  border: none;
}

<ul>
  <li class="product product-cat"></li>
  <li class="product product-cat"></li>
  <li class="product product-cat"></li>
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
</ul>

这将所需的边框应用于只有 .product 类的所有列表项，然后跳过第一个 .product 项并再次删除边框。