css 不选最后一个元素

已于 2023-03-27 00:58:18 修改
阅读量5k 收藏 1
点赞数 2
分类专栏： css3 前端 文章标签： css 前端 html
于 2023-03-27 00:53:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23375733/article/details/129787361
版权
前端 同时被 2 个专栏收录
27 篇文章 1 订阅
订阅专栏
css3
8 篇文章 1 订阅
订阅专栏

在css中，可以利用“:last-child”和“:not()”选择器来不选最后一个元素，换个说法：可以选择除了最后一个元素的所有元素。

  • :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

  • :not(selector) 选择器匹配非指定元素/选择器的每个元素。

示例：

正常情况下这样选择会全部选择

 先用last-child选最后一个

 加上not就可以进行反选了

使用场景：

  • 一般用在循环列表中，比如：每项都要显示一个下边框或下边距，最后一项又不需要显示
涛々
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3复选框和单选按钮美化特效代码
03-20
本文将深入探讨如何使用CSS3对复选框（checkbox）和单选按钮（radio button）进行美化，以创建更具吸引力的表单元素。 首先，复选框和单选按钮是网页交互中常见的组件，用于收集用户的选择信息。它们通常以简单的...
使用CSS实现页面复选框的方法
09-25
在网页设计中，复选框（Checkbox）是一种常见的表单元素，用于让用户在多个选项中进行多选。本文主要探讨如何使用CSS纯技术实现页面复选框的美化和功能优化，避免依赖JavaScript。 首先，纯CSS实现复选框的改造主要...
web前端之css选择第一个或最后一个元素、排除第一或最后一个标签、选择偶数或奇数标签、等差数列标签的选择、选择最后n个标签、第n个标签、child、first、last、nth
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
11-23 4056
web前端之css选择第一个或最后一个元素、排除第一或最后一个标签、选择偶数或奇数标签、等差数列标签的选择、选择最后n个标签、第n个标签、child、first、last、nth
css 选择器之排除最后一个元素
qq_17355709的博客
06-15 3733
css选择器高级用法
CSS——css 排除最后一个元素
最新发布
qq_43201350的博客
05-01 116
CSS——css 排除最后一个元素
CSS3 使用:not(:last-child) 来选择集合中非最后一个元素
weixin_43337481的博客
05-04 1282
使用:not(:last-child) 来选择集合中非最后一个的元素。
CSS 使用:not(:last-child) 来选择集合中非最后一个的元素
SilenceJude的博客
04-19 6554
使用:not(:last-child) 来选择集合中非最后一个的元素。 <div class="zone-tab"> <img class="tab-item"/> </div> <style lang="less"> .zone-tab { .tab-item { width: 2.2rem; height: 1.9rem; &:not(:last-child) { margin-right: 0.
CSS——css 选择除最后一个之外的所有子元素写法
qq_43201350的博客
01-12 512
CSS——css 选择除最后一个之外的所有子元素写法
css给非最后一个子元素添加样式
树上骑个猴的博客
11-17 4082
要使用CSS选择元素中除最后一个之外的所有子元素，可以使用使用:not和:last-child选择器。 语法： element:not(:last-child) { // CSS样式 } :not(selector) 选择器：用来匹配非指定元素/选择器的每个元素。 :last-child选择器：用来匹配父元素中最后一个子元素。 实际案例： .lable-item:not(:last-child){ margin-bottom:10px; } ...
CSS3动态多选框打钩动画特效
07-24
最后，为了实现多选打钩效果，我们可以为每个多选框设置相同的CSS和JavaScript逻辑，确保每个选项都有相同的动画效果。同时，还可以通过调整CSS样式，如颜色、大小等，来适应不同的设计风格。 总结来说，CSS3动态多...
CSS :befor :after 伪元素的巧妙用法
12-12
CSS中的:befor、:after都会创建一个伪元素，其中:befor创建的伪元素是所选元素的第一个子元素，:after创建的伪元素是所选元素的最后一个子元素。 :befor、:after创建的伪元素默认样式为内联样式。 1.2 语法 /* CSS3...
多选框功能并除去最后一个逗号
05-20
在IT领域，多选框（Checkbox）是一种常见的用户界面元素，用于允许用户从多个选项中选择一个或多个。在设计用户界面时，特别是在Web开发和移动应用开发中，多选框是一个不可或缺的部分。本篇文章将深入探讨多选框的...
css伪类：去除最后一个伪元素
学习
02-03 1897
相对于父元素，除最后一个class为item的元素添加伪类。
相同类名但不是同级别的最后一个元素,CSS最后一个子选择器：选择最后一个元素的特定类，不是最后一个子？...
weixin_35956312的博客
01-17 658
hello I want to select #com19 ?.comment {width:470px;border-bottom:1px dotted #f0f0f0;margin-bottom:10px;}.comment:last-child {border-bottom:none;margin-bottom:0;}That does not work as long as I do h...
css3+不是第一个元素,css3-是否可以为“除第一个/最后一个元素外的所有元素”指定CSS缩写？...
weixin_28792813的博客
08-03 297
如果不需要IE7-8支持，则可以使用:first-child CSS选择器。但是，如果您需要支持IE7 +，可能仍然会遇到这种情况，您可以使用一些技巧，并且通常会使您走得很远。 一个鲜为人知的事实是，与其他一些CSS选择器一样，2934261036670770780416伪选择器实际上也可以在IE7 +中运行(尽管不是:last-child)，这使得诸如在水平浮动的布局中添加垂直边距的事情成为可能...
CSS选择除第一个和最后两个以外的所有子元素 + 结构伪类选择器深度解析
热门推荐
JZevin的博客
07-16 1万+
最近在练习网易严选首页的布局时，发现它的顶部导航栏需求很特殊，第一项和最后两项是没有下拉选择框的。那么问题来了，在写css的时候该怎么使用选择器去达到这样的需求呢!？ 首先先贴一下我最后的解决方案： .nav-first>li:nth-child(n+2):not(:nth-last-child(-n+2)):hover .nav-second { display: block; } 其中核心是：:nth-child(n+2):not(:nth-last-child(-n+2)) :nth-c
关于css :last-child 无法选择最后一个元素的解决方法
qq_32741973的博客
08-15 9728
<!DOCTYPE html> <html> <head> <style> p:last-child { color:#ff0000; } </style> </head> <body> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <...
如何通过CSS选择器选择一个元素的子元素？如何选择第一个子元素和最后一个子元素？
官方推荐
08-12 8320
如何通过CSS选择器选择一个元素的子元素？如何选择第一个子元素和最后一个子元素？
如何使用CSS选择器选后N个元素
06-09
要选择后 N 个元素，可以使用 `nth-last-of-type(n)` 或者 `nth-last-child(n)` 选择器。 例如，要选择最后 3 个 div 元素，可以使用 `:nth-last-of-type(-n+3)` 或者 `:nth-last-child(-n+3)` 选择器： ```css div:nth-last-of-type(-n+3) { /* 最后 3 个 div 元素的样式 */ } ``` ```css div:nth-last-child(-n+3) { /* 最后 3 个 div 元素的样式 */ } ``` 其中 `-n+3` 表示选择最后 3 个元素。 `:nth-last-of-type(n)` 选择器选择的是指定类型的倒数第 n 个元素，`:nth-last-child(n)` 选择器选择的是父元素下的倒数第 n 个子元素。如果想选择其他类型的元素，只需要将 `div` 替换成其他元素的标签名即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值