li:nth-child(n+4){color:pink} 7. 选择从第一个到第四个 这里的数字4也是可以根据你的需要替换的。 li:nth-child(-n+4){color:pink} 8.nth-last-child(3) 表示最后三个标签 li:nth-last-child(3){color:pink} 9.nth-last-child(3n) 表示3的倍数3.6.9…… li:nth-last-child(3n){color:pin...
The CSS :last-child pseudo-class selects the element if it is the last child among the other elements. The :last-of-type selector can be used if the user wants to select and apply the style on the last paragraph whether or not it is the last child. Originally the selected element ...
子选择器用>表示,匹配第一个元素的直接后代的第二个元素(即 child)。后代选择器只需要用空格隔开,不要求是直接后代(即 descendant)。 p span{ /* 所有 p 元素中的 span 元素 */ color:red; } p > span{ /* 所有 p 元素中的直接子元素 span 元素 */ color:blue; } p span和p>span都匹配 ...
CSS样式中&、:last-child、>、+、nth-child的使用 一、CSS样式中&和:last-child作用 1、同级样式中,不同类名公用相同或不同样式简洁写法: & 符号作用,在嵌套层次中回溯一层,既实现效果: .icon-zfgs .icon-zfjd ... 2、:last-child作用:指定父元素中最后一个元素的样式,效果如图: 既简洁修改最后一个div...
last-child 先定义最后一个，再找元素，如果说最后一个和所要找元素对不上就没有效果，对的上就有...
first-of-type ：指的是父元素下，相同类型子元素中的第一个，上面的例子中因为 class 为 userinfo-item 的 div 元素是第一个 div 元素，所以生效了，此时如果前面有其他 div 元素，则样式还是不生效的；last-child 和 last-of-type 原理类似。first-of-type mdn： https://developer.mozilla.org...
这时,效果出来了,那么,可以总结了。:last-child表示其父元素的最后一个子元素,且这个元素是css指定的元素,才可以生效。:last-of-type 结尾 总结了一番,对于什么场景下使用:last-child和:last-of-type又了相应的认识,以后犯错的可能性就会降低了很多。
这是css3选择器，意思是选择同级的第一个、最后一个，类似的还有"nth-child"。使用这些选择器可以轻松替代原来需要js实现的样式设置，给指定的html元素设置样式。
发现last-child 和 first child 中的样式不生效。然后把 html 中 class 为 userinfo-item 的 div 前后的元素都去掉,last-child 和 first-child 样式才生效。 当时实际使用中还是需要 div 前后的元素,此时把 first-child 和 last-child 分别改成 first-of-type 和 last-of-type 即可,样式都正常生效。
:last-child 选择器用来匹配父元素中最后一个子元素。 提示:p:last-child 等同于 p:nth-last-child(1)。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 选择器 :last-child4.09.03.53.29.6 更多实例 实例 指定父元素 ul 中最后一个 li 元素,并设置背景颜色: ...