一、css not 在css中,“:not”是选择器的一种,如果希望某个样式不作用到选择器上,可以使用:not(选择器),语法格式为“ 元素:not(元素id){属性:属性值;}”;该选择器匹配非指定元素/选择器的每个元素。 二、last-of-type :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。 三...
}.posts li{border-bottom:1px solid #000;margin-bottom:.5rem;padding-bottom:.5rem; }.posts li:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0; } 运行结果: 我们再看一下使用:not(:last-of-type)来简化: .posts{list-style:none;width:400px;margin:0;padding:20px;margin:4re...
CSS小技巧:使用:not(:last-of-type)简化你的css代码 O网页链接 û收藏 转发 评论 ñ赞 评论 o p 同时转发到我的微博 按热度 按时间 正在加载,请稍候... 微关系 他的关注(162) 法国四姐 Dino-· GenG_LOL_英雄联盟 花儿绽放朱美琦 他的粉丝(376) FsdSoyu ...
CSS3技巧巧妙使⽤:not(:last-of-type)简化你的css代码终于找到了⼀个好⽅法,使⽤:not(:last-of-type)简单⽅便,再也不要⿇烦的单独使⽤:last-of-type了,不错!应⽤场景:平时我们的列表⼀般都会有分割线,但是最后⼀个列表没有分割线等。 123123 123123 123123 123123 123123 .posts...
使用class="not-last-of-type:mb-8">伪类时编译成小程序后发现css文件没有生成对应类的样式,导致样式不生效
border-bottom: 0; } 这里是第一个 这里是第二个 这里是第三个 这段代码的目的是让最后一个span不存在底部border,我以前也是这样处理。但现在是:not(:last-of-type) show time~ .test span:not(:last-of-type){ display: block; border-bottom: 2px solid #e5...
:nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、 :empty选择器、:target选择器。 这些基本上都很常用,今天着重说下:否定伪类:not() 否定伪类特别有用,在css中, :not选择器 用于匹配非指定元素/选择器的每个元素,语法格式: ...
用于选中最后一个元素 :last-of-type 代码语言:javascript 复制 .status_btn_outer:last-of-type{button{border-right:1px solid #D2DCED;}} 上面一行代码选中的还是类为status_btn_outer的最后一个元素 如果要选选中某一个元素内部的最后一个元素 请使用:last-of-child...
*通过 nth-child(n) 和 nth-last-child(n) 设置父元素下第 n 个元素和倒数第 n 个元素的样式: * <!DOCTYPE html> 结构伪类选择器 /* 设置第三个和倒数第三个的样式 */ p:nth-child(3) { border: 2px solid green; } p:nth-last-child(3) { border...
伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式,而且还允许你根据诸如...