CSS3:not()选择器实现最后一行li去除某种css样式_cssli最后一个 - CSDN文库

8 浏览量更新于2023-03-03 评论收藏 41KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

CSS3 :not()选择器实现最后一行选择器实现最后一行li去除某种去除某种css样式样式

在日常开发中经常会遇到在循环中的最后一个li不同于其他的li，要去除某种css样式，本文介绍的是利用CSS3

新增的:not()伪类选择符，实现起来非常的方便，感兴趣的朋友们下面来一起看看吧。

本文中用到的是CSS3新增的:not()伪类选择符，可以匹配不含有选择符的元素。假定有个列表，每个列表项都有一条底边线，

但是最后一项不需要底边线

实例代码如下：实例代码如下：

复制代码

代码如下:

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8" />

<title>使用:not() 最后一行li不添加边框</title>

<style type="text/css"></p> <p>/*

使字体在所有设备上都达到最佳的显示

*/

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}</p> <p>/*

给body添加阴影

*/

body:before {

content: "";

position: fixed;

top: -10px;

left: 0;

width: 100%;

height: 10px;

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

box-shadow: 0px 0px 10px rgba(0,0,0,.8);

z-index: 100;

}</p> <p>/*

设置列表

*/

.listItem {

border: 1px solid red;

}

.listItem ul {

width: 100%;

overflow:hidden;

}

.listItem ul,listItem li {

margin:0;

padding:0;

list-style:none;

}

.listItem li {

margin-left:10px;

}

/*

li 最后一个元素不添加边框

*/

.listItem li:not(:last-child) {

border-bottom:1px solid green;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38729399

粉丝: 5
资源: 902

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈