如何用css选择器选中某个类的第一个元素

现在有一个这样的结构

要将’选中’变成红色改怎么使用css

<divclass="cont"><p>不选中</p><p>不选中</p><h1>不选中</h1><pclass="item">选中</p><pclass="item">不选中</p><p>不选中</p><pclass="item">不选中</p><pclass="item">不选中</p><pclass="item">不选中</p></div>

首先想到的是 伪类选择器

.item:first-child

但是上面这句其实是选中一下两个条件都满足的元素

• class为.item的元素
• 是父元素第一个元素

也就是说这句加上去,不会选到任何一个元素,因为父元素

div

下的第一个元素不是

class='.item'

的元素

除此之外,可以使用兄弟选择器

~

,这个选择器

A~B

则可以选中 A后的所有B元素,只要它们共用一个父元素,

于是可以得出第一个方案

先选中全部的

.item

.cont> .item{color: red;}

再撤销不需要选中的

.cont> .item ~ .item{color: #000;}

这样弄不太好,因为初始属性还要去重新设置,要是每个

<p></p>

的颜色都是在不同地方设置的不同颜色,就不好改了

这时候可以用

:not

选择器得出方案二

.cont>.item:not(.item ~ .item){color: red;}

建议

• 第一,不要用伪类选择器怎么搞,因为手机好像不能用兄弟选择器的样子,放到手机上就失效了
• 第二,可读性太差,而且如果想选中第二个就需要再再用兄弟选择器,第三个以此类推,会写很长,不如直接在class里面加个item_1这种的,用2个class选中.item,.item_1会快很多