Remember that CSS reads ‘right to left’ So, in your case, it’s testing for it to meetallthe conditions. It looks to see if something is the last child then if it has the attribute and class. If it doesn’t have all three…in that order…it fails. The :first-child is working ...
可结果出乎我的意料,我们重新理解一下last-child选择器,在CSS标准中的含义 :last-child p:last-child 选择属于其父元素最后一个子元素每个 元素。 选择其父元素最后一个子元素,每个元素,根据这段话我们能否发现:div-01对应父元素是body,而body最后一个子元素是 苦 而我的选择器是: .div-01:last-child...
当你在CSS中运用first-child或last-child结构伪类时,可能会遇到它们不生效的情况。这是因为这些选择器的生效条件基于元素在HTML结构中的位置,例如,div p:last-child实际上要求div的最后一个直接子元素是p标签,但实际的HTML结构中,元素的排列可能混乱,不一定是按此顺序。解决这个问题有两种途径:首先...
(CSS):last-child不起作用的原因 (CSS):last-child不起作⽤的原因 今天写了个CSS的测试样例,代码如下:<!DOCTYPE html> 伪类选择器 .div-01:last-child{ color: red;} 同 志 们 ⾟ 苦 <
:first-child 指的是父元素的第一个子元素,例如我们本例子中要使用first-child实现的话,必须把h1标签去掉保证没有兄弟元素,或者单独把P标签包围起来; :first-of-type 指的是父元素下相同类型子元素中的第一个,比如我们例子中的第一个p标签。 以此类推,选择器 :last-child 和 :last-of-type、:nth-child(n...
当时实际使用中还是需要 div 前后的元素,此时把 first-child 和 last-child 分别改成 first-of-type 和 last-of-type 即可,样式都正常生效。first-child :指的是父元素的第一个元素,在上面的例子中,要实现样式的话需要保证 class 为 userinfo-item 的 div 元素没有兄弟元素,或者在创建一个...
最近在写CSS,发现有时用结构伪类first-child、last-child会失效。 原因是,比如:div p:last-child,这个选择器的生效条件其实是div最后一个子元素必须是p,但实际HTML结构中,总会各种类型元素夹杂穿插在一起。解决办法有2个: 1、在最后一个p外面再嵌套一层div,让p是新嵌套div的最后一个元素。不推荐,HTML代码不简...
CSS last-child 不起作用CSS last-child 不起作用在CSS中,:last-child 伪类用于选择某个元素的最后一个子元素。然而,有时候我们会发现 :last-child 并不起作用,这可能是由于我们对该伪类的理解有误,或者是由于HTML结构的问题。在本文中,我们将详细介绍 :last-child 的使用方法,并提供一些示例代码来帮助读者更...
虽然最近已经开始发布实现,但要得到广泛支持至少还需要几年时间(截至2018年4月,在成为第一个发布的...
1.last-child .ul li{border:1px solid red;}.ul li:last-child{border:none;} ul最后一个li元素无边框。 2.:not() .ul li:not(:last-child){border:1px solid red;} ul最后一个li元素无边框。 两种作用一样的样式写法,第二种更语义化一些。