如何隐藏特定类的首个li元素？CSS选择器问题求助

问题根源 #

你用的nth-of-type(1)是基于元素类型在父容器中的位置来选择的，不是基于class匹配的位置。

举个例子：

• 父容器ul里的第一个li是带cart-item类的，不是cart_item subtotal，所以li.cart_item.subtotal:nth-of-type(1)根本找不到任何元素——它要求同时满足「是父元素里第一个li」和「拥有cart_item、subtotal类」两个条件，而第一个li不符合class要求。
• 同理，li.cart_item.delivery_fee:nth-of-type(1)也无效，父元素里第一个li不具备对应的class，选择器匹配不到目标元素。

正确解决方法 #

方法1：基于元素实际位置选择（适合结构固定的场景）

直接根据目标元素在ul里的实际位置写选择器：

/* 第二个li是第一个subtotal，第三个li是第一个delivery_fee */
li.cart_item.subtotal:nth-of-type(2),
li.cart_item.delivery_fee:nth-of-type(3) {
    display: none;
}

缺点：如果后续HTML结构变化（比如前面新增li元素），选择器会失效。

方法2：基于兄弟选择器匹配第一个同类class元素（更健壮）

利用~兄弟选择器和:not()伪类，精准匹配每个class的第一个实例，不受前面其他元素影响：

/* 选择所有没有被同class元素前置的subtotal，也就是第一个subtotal */
li.cart_item.subtotal:not(.cart_item.subtotal ~ .cart_item.subtotal),
/* 同理匹配第一个delivery_fee */
li.cart_item.delivery_fee:not(.cart_item.delivery_fee ~ .cart_item.delivery_fee) {
    display: none;
}

这个方法不管前面有多少其他类型的li，只要是第一个出现的subtotal和delivery_fee都会被选中，结构变动也不容易失效。

内容的提问来源于stack exchange，提问作者Faye D.