小程序 first-child 和 last-child 会失效的原因

最新推荐文章于 2024-04-02 03:30:00 发布
最新推荐文章于 2024-04-02 03:30:00 发布
阅读量4k 收藏 1
点赞数
分类专栏： 小程序开发问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smlljet/article/details/90712727
版权

小程序 first-child失效 使用:nth-child(2)应用到了第一个子元素 ，原因（存在兄弟节点 即使类名不一样）如下图 ruleTitle为gift的兄弟节点
在这里插入图片描述
设置first-child伪类时我们看第一个的前面有没有兄弟节点，
设置last-child伪类时看最后一个有没有兄弟节点。
所以要设置这种伪类时如果没有起到效果，我们可以先看一下他有没有同级的兄弟节点

Hong Jet
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3的first-child选择器实战攻略
09-24
主要介绍了CSS3的first-child选择器实战攻略,包括first-child和:first-of-child的区别以及针对IE兼容问题的讲解,需要的朋友可以参考下
jQuery中:first-child选择器用法实例
10-24
了解并熟练掌握`:first-child`选择器对于优化DOM操作和提高jQuery代码效率至关重要，尤其是在处理列表或表格等具有多个相似子元素的结构时。正确使用`:first-child`可以帮助减少不必要的遍历和操作，提高页面性能。
uni-app中的css3选择器使用，大牛推荐
最新发布
m0_60750088的博客
04-02 948
效果与nth-child（n）效果类似，第一个为文本时候，样式不生效。使用nth-of-type 修改样式。作为window对象属性的文档元素。作为window对象属性的文档元素。3.想改变某一个view 样式。4.奇数偶数间隔样式设置方式。
微信小程序last-child、first-child 样式失效的解决办法
q1ngqingsky的博客
12-21 2646
使用last-child或者first-child 需要将子集包在一个父元素中才可以生效 .tab-content text:last-child { margin-right: 0; } <view class="tab-content"> <text bindtap="tapActive" data-active="1" class="{{active === '1'?'active':''}}">贸易代采</text> ...
记录解决在uniapp中使用:last-child不生效的问题
hua4st的博客
02-21 655
此时最后一个navigator并没有变成红色，而是所有的都变为了红色。在某学习视频中使用如下代码设置:last-child。在navigator外包裹一层view。
first-child 和 last-child 会失效的原因。
qq_40128591的博客
07-19 7945
如上图这两个list-item如果想对last-child设置样式是不可以的，因为他后面后面还有个空兄弟节点。 设置first-child伪类时我们看第一个的前面有没有兄弟节点， 设置last-child伪类时看最后一个有没有兄弟节点。 所以要设置这种伪类时如果没有起到效果，我们可以先看一下他有没有同级的兄弟节点。 解决办法：是我们可以把list-item用一个容器包起来再设置。...
微信小程序first-child 和 last-child 失效,设置后不起作用~
啥也不会只能CV
03-21 9254
微信小程序first-child 和 last-child 失效,设置后不起作用~ 问题:在不确定有多少个子项的前提下,需要给最后一个子项添加一个样式. 使用了last-child不生效. 解决办法:在detailData外面包一个父元素,相当于li里的ul一样. ...
vue 手写一个步骤条&last-child不起作用的问题
早晚的博客
09-15 892
因为你last-child用错地方了，如果你是在set-2上面使用last-child，肯定 可以用，如果你用在height上边 肯定是不可以的。咱们在这个元素中v-if判断 一下就好了 v-if=“index!=options.length - 1”2、怎么才能在不使用last-child使最后一个隐藏呢。在height使用last:child。可以看到是不起 作用的，所以就用到js。1、为什么last-child不能用。这个会隐藏最后一个元素的border。
选择器:first-child与:last-child失效的解决方法
jcoiwenwfkowe的博客
07-02 369
选择器:first-child与:last-child失效的解决方法
jQuery中:last-child选择器用法实例
10-24
在jQuery中，`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器，如`:first-child`、`:nth-child(n)`等，你可以编写出更加优雅和高效的jQuery代码，提高网页的交互性和用户体验。
jQuery+css last-child实现选择最后一个子元素操作示例
10-17
此外，jQuery还提供了许多其他选择器，如`:first-child`, `:nth-child(n)`, `:even`, `:odd`等，可以根据需要灵活运用。 总之，熟练掌握jQuery和CSS选择器的使用对于提升网页开发效率至关重要。通过不断实践和学习...
css选中父元素下的第一个子元素(:first-child)
11-19
`:first-child`应用于`body p:first-child`时，只有那个直接位于`<body>`标签内的首个`<p>`标签会被选中，背景颜色变为黄色。即使在`<body>`之后有其他`<p>`元素，它们也不会受到`:first-child`的影响，因为它们不是...
first-child、last-child、nth-child( )失效问题
前端菜鸡的博客
06-04 9379
最经遇到一个first-child、last-child、nth-child()失效的问题，我相信还有很多人都会遇到，下面我就分2类来简单的说明下 ①first-child和last-child失效 第一种情况是first-child和last-child问题，话不多说先贴代码 <!DOCTYPE html> <html> <head> <meta...
微信开发者nth-child问题
qq_52966774的博客
08-04 456
微信小程序nth-child问题
first-child 不起作用的原因
mjavaa的博客
02-13 2319
first-child 不起作用的原因
小程序:first-child{ border-top: none }不生效问题
zhaoge's blog
01-04 435
下方代码不起作用 <view> <view class="listItem" id="firstChild"></view> </view> .listItem:first-child { border-top: none; } 下方起作用 <view class="listItem" id="firstChild"></view> .listItem { border-top: 1px solid #000; } #fi
解决伪类nth-child(1)/frist-child不生效
qq_39691676的博客
07-21 490
nth-child是添加到特定选择器规则的伪选择器。解决方案： 将vNode提升至父级。
rpx和px转换
flowRight的博客
06-04 9236
通过API wx.getSystemInfoSync()获取值 **// 在 iPhone6 下运行： var systemInfo = wx.getSystemInfoSync(); console.log(systemInfo.windowWidth); // 输出 375（单位 px） // 在 iPhone6 Plus 下： var systemInfo = wx.getSyste...
first-child生效而last-child不生效
08-16
问题:first-child生效而last-child不生效的原因是什么? 回答: 这个问题出现的原因是CSS选择器中的last-child选择器的生效条件是父元素的最后一个子元素必须是特定的元素，而不是仅仅是父元素的最后一个子元素。在给定的HTML结构中，最后一个子元素是loading而不是c1，所以last-child选择器没有匹配到任何元素，导致样式不生效。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决css样式中first-child和last-child不生效的问题](https://blog.csdn.net/weixin_44684272/article/details/121583249)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [last-child不生效问题](https://blog.csdn.net/HYeeee/article/details/119797997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值