first-child与nth-child(1)失效

最新推荐文章于 2024-03-28 14:54:47 发布
最新推荐文章于 2024-03-28 14:54:47 发布
阅读量474 收藏 1
点赞数
分类专栏： 日常记录 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45229447/article/details/109894934
版权

失效原因是在它之前还有兄弟元素

在这里插入图片描述

这里使用

.list{
	&:first-child{} //不生效，因为有在它之前还有兄弟 tip 和 listHeader
}

解决办法 ：使用nth-of-type 或者给第一个list加 id 或者特殊 class 吧
放手吧，别卷了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS nth-child与nth-of-type的元素查找方式
09-24
主要介绍了详解CSS nth-child与nth-of-type的元素查找方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css :nth-child与:nth-of-type之小解
09-25
css :nth-child与:nth-of-type之小解,需要的朋友可以参考下。
CSS3---first-child或者nth-child(1) 不起作用的原因
weixin_33712987的博客
08-18 1311
一、零碎 1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child(even)、nth-last-child(3)（倒数第三个） 注意点： 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 1、先找到该伪类...
学习记录307@CSS3中nth-child()不起作用的问题
教练我想学编程
09-07 7848
先看下面的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 被变为红色的是第几个p? */ div p:nth-child(2){ color: red; } </style> </head> <body> <div
解决伪类nth-child(1)/frist-child不生效
qq_39691676的博客
07-21 448
nth-child是添加到特定选择器规则的伪选择器。解决方案： 将vNode提升至父级。
CSS中first-child和nth-child的讲解
yuyurenjie的博客
11-16 7137
:first-childE:first-child是伪类选择器，很多人都知道它的存在，但是在使用时，可以仍存在误解。说明匹配父元素的第一个子元素E从说明可以看出E是你要选择的第一个子元素，而不是父元素。一开始，误以为E:first-child是E的第一个子元素。举个例子：<ul> <li>l1</li> <li>l2</li> <li>l3</li> </ul>假设选择的是第
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。...下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴，下面来一起看看吧。
解决css中E:first-child,E:last-child,nth-child()无效的问题
m0_74090668的博客
11-12 1192
总结原因：nth-child()它的范围是在E（这里是li）的所有兄弟sibilings中，故li：nth-child（1）是指的第一个li，而在原来的ul：nth-child（1）是指整个ul，包括了里面所有的li。情况：h1排在第2位，改变了颜色，而第3位的h2不变。注意：h3：last-child此时无效。目的：想给ul中第一个li设置颜色。更改标签，第3位是h2。
first-child或者nth-child(1) 不起作用的原因
菜鸡的博客
05-21 1314
子元素的指定选择器。
CSS选择器 first-child nth-child
学习笔记
04-08 5443
:first-child 选择属于父元素的第一个子元素。 :nth-child(2) 选择属于父元素的第二个子元素。 :last-child 选择属于父元素的最后一个子元素。 例子： .class ul li:first-child{display: none;} /*第一个li隐藏*/ p:nth-child(2) 选择属于父元素的第二个子元素的每个 &l...
nth-child无效？nth-child(4-n)等于nth-child(-n+4)?
weixin_55253195的博客
09-19 471
最后，试试把写法改一下，效果可能就出来咯；如果你的nth-child还是不生效，也可能是你把nth-child()和nth-of-type()弄混了。今天写样式的时候，发现nth-child(4-n)不起作用，中间就不说了，结果发现要把4-n写成-n+4才有用，上代码；首先，关于nth-child的基本用法和选中前几个元素这里就先不说了，教程有很多很详细的，一搜就有。上面写的是an+b，应该是顺序不能变的，当查漏补缺吧。如果我的拙见有什么不对的地方，欢迎指出，本人也是小白；查了MDN，上面是这样定义的。
CSS中first-child和nth-child
dengcuol09165的专栏
06-30 187
first-child E:first-child是伪类选择器， 匹配父元素的第一个子元素E 从说明可以看出E是你要选择的第一个子元素，而不是父元素。一开始，误以为E:first-child是E的第一个子元素。 :nth-child(n) 匹配父元素的第n个子元素E E也是子元素，而且也只能匹配父元素下第n个子元素。n是从1开始计数 <ul> ...
css中的:first-child、:last-child、:nth-child()、:nth-of-type()和:only-child 伪类选择器
最新发布
Br不二
03-28 881
CSS中的`:first-child`、`:last-child`、`:nth-child()`、`:nth-of-type()`和`:only-child`是伪类选择器，它们允许你根据元素在其父元素或同级元素中的位置或类型来选择元素
CSS-子元素过滤选择器：first-child 与 :nth-child(n) 的特殊之处
LzzMandy的博客
06-22 1923
语义： 1、：first-child 指的是选取父元素的第一个子元素 2、:nth-child(n) 指的是选取父元素下的第 n 个子元素，n 从1开始 来看一个实例，页面展示的样式如下： DOM结构如下： <div class="selector"> <img src="../../../assets/images/monitors/echart_...
:nth-child() 选择器，问题
aeoliancrazy的博客
04-12 431
问题1， 可能存在的顺序问题 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> .out
CSS选取第几个标签元素：nth-child(n)、first-child、last-child
热门推荐
一颗程序猿
10-03 7万+
前言：今天码代码时候遇到的需求要选取前两个标签元素，查了资料记录下来~nth-child（n）、first-child、last-child用法注：nth-child(n)选择器匹配父元素中的第n个子元素。 n可以是一个数字，一个关键字，或者一个公式。
Uniapp的坑
qq_45549336的博客
07-07 1255
一、时常组件传递值，watch能打印，就是渲染不上，总结一下，应该是传递的值太深，具体去看vue的官网，解决方案，下面。 watch: { //这里的wath不起效果，vue官网说嵌套太深会导致不起效， //我觉得我这里的数据这也不深啊， //只能使用下面的deep深度监听+immediate立即调用 //下面注释的这个不可用，高亮显示的能用 // card(newValue) { // console.log(this.card) // this.desc =
first-child、last-child、nth-child( )失效问题
前端菜鸡的博客
06-04 9307
最经遇到一个first-child、last-child、nth-child()失效的问题，我相信还有很多人都会遇到，下面我就分2类来简单的说明下 ①first-child和last-child失效 第一种情况是first-child和last-child问题，话不多说先贴代码 <!DOCTYPE html> <html> <head> <meta...
css3中nth-child与nth-of-type
09-10
nth-of-type选择器与nth-child类似，但只会考虑同类型的子元素。它也接受一个参数n，表示选择每隔n个同类型子元素。例如，nth-of-type(2n)会选择每隔2个相同类型的子元素。 以下是一些示例： ```css /* 选择第一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值