CSS3 :not()挑选器完成最终1行li除去某种css款式

日期:2021-03-03 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

本文选用到的是CSS3新增的:not()伪类挑选符,能够配对不含有挑选符的元素。假设有个目录,每一个目录项都有1条底边线,可是最终1项不必须底边线

案例编码以下:

拷贝编码
编码以下:

<!DOCTYPE>
<html>
<head>
<meta charset="utf⑻" />
<title>应用:not() 最终1行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: ⑴0px;
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 最终1个元素不加上边框
*/
.listItem li:not(:last-child) {
border-bottom:1px solid green;
}

/*
与第1个li相连弟兄
*/
.listItem li:first-child ~ li { border-left: 1px solid #666; }

</style>
</head></p> <p><body></p> <p> <div class="listItem">
<ul>
<li>目录1</li>
<li>目录2</li>
<li>目录3</li>
<li>目录4</li>
<li>目录5</li>
</ul>
</div>
</body>
</html>

总结
以上便是运用CSS3 :not()挑选器除去最终1行li的某种css款式,如何?還是很便捷的吧,期待这篇文章内容对大伙儿学习培训或应用CSS3能有一定的协助,假如有疑惑大伙儿能够留言沟通交流。

上一篇:css box 返回下一篇:没有了