css处理最后一个li

最新推荐文章于 2024-09-05 21:00:39 发布
转载 最新推荐文章于 2024-09-05 21:00:39 发布 · 646 阅读 · 0 

.relatebar li{width:98px;height:146px;padding:5px;float:left;border-left:1px solid #ccc;}

.relatebar li:first-child{border-left:0px solid #ccc;}
.lanmu3 .k2 .item ul{display: block;float: left;width: 300px;}
.lanmu3 .k2 .item ul li{float: left;padding-left: 10px;padding-right: 10px;
    padding-bottom: 5px;border-right: 1px solid rgba(139,192,252,0.2);height: 12px;}
.lanmu3 .k2 .item ul li:last-child{border: 0px;}
.lanmu3 .k2 .item ul li a{color: #8bc0fc;font-size: 12px;}

在处理这种分隔符的时候非常有效。

css取出li,CSS3中not()选择器实现最后一行li去除某种css样式的代码
weixin_31006689的博客
08-04 704
这篇文章主要介绍了关于CSS3中not()选择器实现最后一行li去除某种css样式的代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在日常开发中经常会遇到在循环中的最后一个li不同于其他的li，要去除某种css样式，本文介绍的是利用CSS3新增的:not()伪类选择符，实现起来非常的方便，感兴趣的朋友们下面来一起看看吧。本文中用到的是CSS3新增的:not()伪类选择符，可以匹配...
CSS3新特性-选择器
MyBlog
05-15 359
结构性伪类 :first‐child/last‐child 父元素中第一个元素和最后一个元素 <div> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </div> div li:first-child { color: red
CSS选中最后一个li
weixin_30390075的博客
08-19 3976
.class ul li:nth-child(1):选择中最后一个li.box ul li:nth-child(1){　　margin-right:0;} 转载于:https://www.cnblogs.com/PHP0222wangdong/p/11339521.html
【css】获取最后一个li进行样式特殊处理
qq_43720551的博客
09-05 1115
每项列表项添加一个margin，最后一个元素不添加。子元素，以便CSS选择器能够正确地应用样式。伪类选择器来选择列表中的最后一个。有个列表，列表项之间有一段间隔。确保在你的HTML代码中，你可以使用 CSS 的。
CSS3 :not()选择器实现最后一行li去除某种css样式
09-24
上述CSS规则表示，`.listItem`类下的所有`li`元素中，除了`:last-child`（即最后一个子元素）之外，都将应用绿色的1像素实线边框。这样，最后一个`li`就不会有下边框，而其他`li`则会有。 此外，`:not()`选择器还...
css3 flex布局 justify-content:space-between 最后一行左对齐
11-21
如果每行4列，需要处理最后在第二列和第三列的情况： ```css .list2 li:last-child:nth-child(4n + 2) { margin-right: calc((100% - 元素宽度) / 3 * 2); } .list2 li:last-child:nth-child(4n + 3) { ...
使用CSS3制作一个简单的Chrome模拟器
09-25
在本文中，我们将探讨如何利用CSS3来创建一个简单的Chrome模拟器，主要关注其基本的界面样式。这个项目主要是为了展示CSS3的一些基础特性和应用，对于初学者来说是一个很好的实践案例。 首先，我们注意到Chrome...
JS+CSS通用一个页面同时三个焦点图轮换效果完整实例
07-03
本实例将探讨如何使用JavaScript（JS）和层叠样式表（CSS）技术实现一个页面同时展示三个焦点图的轮换效果。这种效果可以增加网站的交互性和视觉吸引力。 首先，我们需要创建HTML结构来承载这三张焦点图。通常，...
一个效果很不错的jquery+css导航菜单
12-25
本文将深入探讨一个利用jQuery与CSS结合制作的高效且外观吸引人的导航菜单。这种菜单设计可以广泛适用于多种现代网页设计中，为用户提供便捷的导航体验。 首先，CSS（层叠样式表）在网页设计中扮演着不可或缺的角色...
css（1）:not()和last-child
weixin_41724477的博客
08-03 5362
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元素无边框。 两种作用一样的样式写法，第二
ul列表第一个li和最后一个li的如何选中
weixin_44647098的博客
06-12 1万+
第一个li的样式：li:first-child { background:#f00; } 最后一个li的样式：li:last-child { background:#000; } 第n个li的样式：li:nth-child(n) { background:#000; } 倒数第二个li的样式：nth-last-of-type(2){ background:#000; } 奇数列表：li:nth-child(odd) { background:#f00; } 偶数列表：li:nth-chi
去除列表最后一个li元素的border-bottom
qq_38105960的博客
07-13 6321
方法一：给最后一个li单独设置一个类样式，重新设置border-bottom的属性值为none，或者使用margin-bottom设置负边距。 .lastli{ margin-bottom:-1px ; /*或者使用border-bottom: none;*/ } 方法二：使用CSS3中的新增加选择器，选择最后一个li，不使用类样式，好处是当li的个数不...
CSS实现最后一个li样式不一样
若水印象博客
05-09 9219
#news .newsmore{ display:block; margin-top: 0; cursor: pointer; border-bottom:1px solid #E0E0E0; } #news .newsmore:last-child { border-bottom: 0; }
怎么在导航栏目之间加短竖线？导航after定义小图片
黎成诃月的博客
04-11 3299
    &lt;style&gt;    .menu ul{    display: flex;    justify-content: center;    background: #f2f2f2;    padding: 0.1rem 0;    }    .menu ul li{    float: left;    width: 1.46rem;    position: r...
ul列表第一个li和最后一个li的特殊样式解决办法
热门推荐
暮雪进化史
03-02 1万+
第一个li的样式：li:first-child {  background:#f00;  }最后一个li的样式：li:last-child {  background:#000;  }第n个li的样式：li:nth-child(n) {  background:#000;  }倒数第二个li的样式：nth-last-of-type(2){color: #f00;}奇数列表 li:nth-child...
ul列表解决最后一个li标签的margin问题
一杯苦恰啡的博客
08-15 3716
原文地址：http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html 方法一：运用css3的nth-child(3n)，但是不兼容ie8及以下。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <
ul 里面的li 如何让最后一个li放在最后面
飞翔的熊blabla
02-18 2546
 如 更多是&lt;li&gt;标签的最后一个 如何让li放在最后面呢ul的定义.mod-linkTabs { position: relative; width: 172px; height: 31px; padding-right: 43px !important; margin-left: -15px !important; overflow: hidde...
sass嵌套样式选中最后一个li元素，使用伪类、伪元素
agua001的博客
08-14 8087
html <ul class="mingxing"> <li class="huge">胡歌</li> <li class="huge">江疏影</li> </ul> css .mingxing{ .huge { margin-bottom: 10px; } // 选中最有一个li :nth-child (1) { margin-bottom: 0px; } } 另一种写法 :nth-child { marg
css排除最后一个class
最新发布
03-18
### 如何在 CSS 中选择除最后一个之外的所有具有相同类名的元素 要实现选择除最后一个外的所有具有特定类名的元素，可以利用伪类 `:not()` 和 `:last-of-type` 或者 `:nth-last-child(1)` 的组合来完成。 以下是具体方法： #### 方法一：使用 `:not(:last-of-type)` 如果这些元素是同一类型的标签（例如 `<div>`），可以通过以下方式选择它们： ```css .my-class:not(:last-of-type) { /* 样式 */ } ``` 这里的关键在于 `:last-of-type` 只会选择该父级下的最后一种类型标签[^2]。因此，当所有 `.my-class` 都属于同种 HTML 类型时，这种方法有效。 #### 方法二：使用 `:not(:nth-last-child(1))` 更通用的方法适用于不同种类标签的情况，即通过 `:nth-last-child(n)` 来定位倒数第 n 个子节点。对于排除最后一个拥有某类名的元素来说，则可写成如下形式： ```css .my-class:not(:nth-last-child(1)) { /* 样式 */ } ``` 此规则会匹配到除了作为其兄弟姐妹间最后一项的那个以外所有的`.my-class`实例。 另外需要注意的是，在某些复杂布局下可能还需要考虑其他因素比如浮动或者显示属性等影响实际渲染顺序的因素[^3]。 #### 示例代码 假设我们有这样一段HTML结构： ```html <ul class="list"> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> <!-- 不希望选中 --> </ul> ``` 对应的CSS应该是这样的： ```css .item:not(:nth-last-child(1)) { color: red; } /* 这样只会让前两个<li>变成红色字体颜色而忽略掉第三个*/ ``` ### 注意事项 上述解决方案依赖于DOM树中的位置关系来进行筛选操作；如果目标集合内的项目并非直接相邻或者是跨多个容器分布的话，则单纯依靠纯CSS难以达成目的，此时或许需要借助JavaScript进一步处理[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值