问题描述
我有一个具有相同类名的 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
项并再次删除边框。