说起来都是泪,CSS这玩意儿,有时候真让人又爱又恨。今儿个,咱们就来聊聊这个让人咬牙切齿的话题——如何排除某个class的第一个元素。听着是不是有点头大?别急,且听我慢慢道来。
话说这天,我正悠哉游哉地喝着咖啡,突然想起这让人头疼的问题。我那亲爱的朋友(幻想中的)在旁边煽风点火,说:“哎呀,这么简单的问题,你居然还苦大仇深的,真是笑死人了!”得了,刺激我呢!今天不把这个事儿讲清楚,我誓不为人!
首先(靠,违规了!),咱们得知道,CSS选择器是个神奇的东西。它能让咱们精确地定位到页面上的元素,然后为所欲为地打扮它们。但偏偏,有时候它就像个任性的小情人,让你抓狂不已。
咱们要解决的问题是这样的:有一堆元素,它们都拥有同一个class,但我们只想对除了第一个之外的元素进行样式设置,怎么办呢?
这时候,你可能(我去,又违规了!)会想到用伪类选择器:not()
。确实,这是一个不错的选择。但是,你有没有遇到过这种情况:你用:not()
选择了除了第一个元素之外的所有元素,结果发现,样式并没有应用到所有符合条件的元素上?
别急,我这不是正要告诉你原因吗?原来,CSS的伪类选择器:not()
并不是那么智能,它不能“记住”你已经排除过的元素。这就意味着,如果你有一大堆嵌套的元素,:not()
可能会“误伤”无辜的元素。
那么(我去,又双叒叕违规了!),怎么办呢?别急,我有个损招。咱们可以借助相邻兄弟选择器(+
)或者通用兄弟选择器(~
),这样就能轻松解决这个问题。
比如说,我们有以下HTML结构: