结构性伪类----:not的使用

最新推荐文章于 2023-06-22 19:29:38 发布

Kong_十六

最新推荐文章于 2023-06-22 19:29:38 发布

阅读量384

点赞数

分类专栏： # Web—CSS初级 Web—第一阶段文章标签： CSS选择器伪类

本文链接：https://blog.csdn.net/qq_42383764/article/details/104128518

版权

Web—第一阶段同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

Web—CSS初级

21 篇文章 0 订阅

订阅专栏

结构性伪类中的：not（选择器）在使用时牵扯到的问题。

典型的问题：在需求中，每个列表项都需要添加一个效果，除了（选择器）的列表项。

这个伪类选择器解决的是：在满足要求中的所有元素中剔除一个不需要满足这个要求的元素

可能我的表述不是特别的清楚明了，举个相似的例子就明白了（捂脸捂脸）

制作项目栏最后一项不要分割线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构性伪类：not</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				/* width: 1050px; */
				height: 100px;
				background-color: #FF0000;
				margin: 50px auto;
			}
			#wrap > a{  
				display: block;
				float: left;
				width: 100px;
				height: 100px;
				font: 25px/100px "arial black";
				text-align: center;
				text-decoration: none;
				color: whitesmoke;
			}
			
			a:hover{
				background-color: #8B4513;
				font-weight: bolder;
				border-top: 1px solid #8B4513;
				border-left: 1px solid #8B4513;
			}
			
			#wrap > a:not(:last-of-type){
				border-right: 3px solid #F5F5F5;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<a href="#1">首页</a>
			<a href="#1">博客</a>
			<a href="#1">下载</a>
			<a href="#1">论坛</a>
			<a href="#1">问答</a>
			<a href="#1">学院</a>
			<a href="#1">活动</a>
			<a href="#1">专题</a>
			<a href="#1">招聘</a>
			<a href="#1">APP</a>
		</div>
	</body>
</html>

还存在一些问题，如果我用无序列表把链接包裹起来，好像会有问题，选择器会选不中。哎，等我再看看了，再补充一下吧。

Kong_十六

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
结构性伪类----:not的使用

结构性伪类中的：not（选择器）在使用时牵扯到的问题。典型的问题：在需求中，每个列表项都需要添加一个效果，除了（选择器）的列表项。这个伪类选择器解决的是：在满足要求中的所有元素中剔除一个不需要满足这个要求的元素可能我的表述不是特别的清楚明了，举个相似的例子就明白了（捂脸捂脸）制作项目栏最后一项不要分割线<!DOCTYPE html><html>...
复制链接

扫一扫