cssfirst（cssfirstchild无效）

本篇文章给大家谈谈cssfirst，以及cssfirstchild无效对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、css 中 first-child 是什么意思
• 2、CSS中P.first和P first 有什么区别
• 3、CSS选择器first-child，当元素为第二个的时候，怎么处理?
• 4、css中first-child和last-child不生效

css 中 first-child 是什么意思

css2里的伪类均摊符，意思是：匹配父元素的第一个子元素

你可以态基颤在css手机里可以查到这个伪类选帆败择符

比如：

ul

li列表项一/li

li列表项二锋乱/li

li列表项三/li

li列表项四/li

/ul

在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相关的伪类都如此。

[img]

CSS中P.first和P first 有什么区别

CSS中 P.first 表示class属性值为first的所有p元素

P first

情况一：这个P first是你打错丛好圆了，正确的是 P .first，那么表示p元素的所有class属性值为first的后代元素

情况二：如果你没打错，P first这个我也没见到过，无法给你答案。

根据情况一再结合第一句话。他们之间的区别袜烂，一个是后代选择器即P .first，一个是类选择器即P.first，当然这个是大致的划分开他们之间的区别。渗塌

CSS选择器first-child，当元素为第二个的时候，怎么处理?

.content[data-role=page]:nth-child(2){}

使用:first-child伪如和搭类时一定要保证前面没有兄弟节点，渣拿你前面有个content所以会失效

style

p:first-child{color:#f00;}

/style

div

span/span

p1/p

p2/p

p3/p

/div

你把这里的span去掉和加上再看效果 就明白了棚樱

css中first-child和last-child不生效

发现 last-child 和 first child 中的样式不生效。然后把 html 中 class 为 userinfo-item 的 div 前后的元素都去掉，last-child 和 first-child 样式才生效。

当时实际使用中还是需要 div 前后的元素，此时把 first-child 和 last-child 分别改成 first-of-type 和 last-of-type 即可，样式都正常生效。

first-child ：指的是父元素的第一个元素，在上面的例子中，要实现样式的话需要保证 class 为 userinfo-item 的 div 元棚备李素没有兄弟滚氏元素，或者在创建一个单独 div 包裹起来；

first-of-type ：指的是父元素下，相同类型子元素中的第一个，上面的例子中因为 class 为 userinfo-item 的 div 元素是第一个 div 元素，所以生效了，此时如果前面有链迟其他 div 元素，则样式还是不生效的；

last-child 和 last-of-type 原理类似。

first-of-type mdn：

first-child mdn：

关于cssfirst和cssfirstchild无效的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。