【CSS3】使用:not(:last-of-type)简化你的css代码

最新推荐文章于 2024-03-11 15:13:20 发布
最新推荐文章于 2024-03-11 15:13:20 发布
阅读量783 收藏
点赞数
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuncle/article/details/62889568
版权
本文介绍了如何使用CSS3的选择器`:not(:last-of-type)`来简化CSS代码，通过实例展示了如何用一行代码替换原本五行的代码，从而提高代码的简洁性和效率。
摘要由CSDN通过智能技术生成

演示效果：第三个标题没有下边框

这里写图片描述

以前写代码是这样：

<style>
.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post
最低0.47元/天 解锁文章
邹大叔
关注
专栏目录
css3_新增选择器
qq_43260366的博客
10-11 444
上述代码发现设置样式不起作用，原因是.box input:nth-child(2)是寻找类名为box的元素里面 第二个元素且该元素为input元素的元素，但是box元素里面第二个元素为a标签，所以设置失败，样式不起作用。上述代码发现样式设置成功了，原因是.box input:nth-of-type(2)是先将类名为box的元素里面的input标签元素找出来进行排序，发现共有3个，给第二个设置样式就设置成功了。结构伪类选择器是根据文档结构来选择元素，常用于根据 父级元素来选择子元素。
css 简化,CSS小技巧：使用:not(:last-of-type)简化你的css代码
weixin_29289821的博客
08-03 463
终于找到了一个好方法，使用:not(:last-of-type)简单方便，再也不要麻烦的单独使用:last-of-type了，不错！我以前也没有想到过这种用法，这个小小的技巧能省去很多时间和代码。下面让我解释一下，比如说，我们要美化一个文章列表。Post TitleThurs, Feb 16, 2017我以前的实现方法是这样的，其实是很笨的方法！.posts {list-style: none;m...
CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码
anze0204的博客
03-22 643
终于找到了一个好方法，使用:not(:last-of-type)简单方便，再也不要麻烦的单独使用:last-of-type了，不错！ 应用场景：平时我们的列表一般都会有分割线，但是最后一个列表没有分割线等。 <ul class="posts"> <li>123123</li> <li>123123</li&...
html列表处理技巧,菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)
weixin_28722991的博客
06-24 578
网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。如文章列表如下：中国网页设计-权威网页制作教程网站好站推荐-www.125jz.comHTML5学习专题上线了！原来的实现方法如下:.posts {list-style: none;...
CSS3 使用:not(:last-child) 来选择集合中非最后一个元素
weixin_43337481的博客
05-04 1425
使用:not(:last-child) 来选择集合中非最后一个的元素。
css选择器 - :not :after :last-child
laukayiu的博客
10-18 1448
可组合使用 下面例子是在所有button_item（除最后一个）的后面插入如下内容
01-CSS3基础
人俗话不多
03-06 1246
CSS简介 HTML 主要做结构, 显示元素内容 css 是层叠样式表 主要做样式,用来美化 HTML ,布局网页 CSS 语法规范 css规则主要有两个盒子模型主要部分构成: 选择器以及一条或多条声明. 属性和属性值以键值对的形式出现 属性和属性值之间用 “:” 分开 多个键值对中间用";" 进行区分 代码规范 空格规范: p { color: #ff0000; font-size: 30px; } 属性值前面
前端大厂最新面试题-css3_features.docx
06-06
CSS3中新增了多种选择器，如伪类选择器`:nth-child()`, `:nth-of-type()`, `:first-of-type`, `:last-of-type`等，使得我们可以更精确地选中特定的元素。还有结构性伪类如`:empty`, `:not()`, 以及属性选择器如`...
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
weixin_46615135的博客
03-23 1499
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
CSS 使用:not(:last-child) 来选择集合中非最后一个的元素
SilenceJude的博客
04-19 6665
使用: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中使用:not()选择器为最后一个元素去除边框
weixin_39632057的博客
08-04 4006
CSS 否定伪类，:not(X)，是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类，它不会增加选择器的优先级。:not() 伪类可以将一个或多个以逗号分隔的选择器作为其参数(实验性的，尚未广泛支持，目前Safari、IOS Safari支持)。选择器中不得包含另一...
css :last,CSS :not(:last-child):after selector
weixin_42348371的博客
08-03 593
Your sample does not work in IE for me, you have to specify Doctype header in your document to render your page in standard way in IE to use the content CSS property:OneTwoThreeFourFiveSecond way is t...
css（1）:not()和last-child
weixin_41724477的博客
08-03 5244
1.last-child .ul li { border: 1px solid red; } .ul li:last-child { border: none; } ul最后一个li元素无边框。 2.:not() .ul li:not(:last-child) { border: 1px solid red; } ul最后一个li元素无边框。 两种作用一样的样式写法，第二
css3 新加选择器 排除选择器 :not()
热门推荐
sally18的博客
05-29 2万+
css :not()排除函数 css:not()函数用来排除选择，not(x),其中的x为css选择器，但是x不能是not选择器，也就是说:not()排除选择器不能嵌套使用。 css:not()排除选择器使用 .sibcont{ background:#f1f1f1; border:1pxsolid#bababa; margi...
css选择器
cxy_12345的博客
07-30 241
css选择器：基础选择器，关系选择器，属性选择器，伪类选择器，伪对象选择器 基础选择器：#id .class 标签名称 关系选择器： 包含选择器（E F） 选择所有子元素，包括孙元素等 eg:ul li {} 子选择器（E&gt;F）选择直接子元素，不包含孙元素等 相邻选择器（E+F）选择相邻的第一个兄弟元素以及这个兄弟元素的所有子孙元素,只选择第一个 向下选择兄弟元素 兄弟选择器（E...
CSS技巧
P1Y2S3的博客
10-26 1096
容易被忽略的：not(:last-child)
除去最后一个，其他的底部都加一条横线
最新发布
qq_45915072的博客
03-11 103
【代码】除去最后一个，其他的底部都加一条横线。
CSS常用伪类选择器详解
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
CSS基础面试题全解：45道经典题目及答案
在样式优先级上，`:not` 选择器、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-child`等CSS3新增的伪类用于更精确地定位元素。 4. **CSS优先级计算规则**： 优先级计算涉及选择符的权重，如id选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值