侧边栏壁纸
博主头像
lai博主等级

  • 累计撰写 44 篇文章
  • 累计创建 19 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

纯css实现tag标签

lai
lai
2022-12-16 / 0 评论 / 1 点赞 / 72 阅读 / 401 字
温馨提示:
本文最后更新于 2022-12-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

网站中我们经常看到各种各样的小标签,我们可以通过nth-child选择器来过设置样式来实现多彩小标签,nth-child(9n)代表9的倍数项,代码如下:

<body>
	<style  type="text/css" rel="stylesheet">
	.tags a:nth-child(9n) {
		color:#4A4A4A;
		background-color:#4A4A4A66;
	}
	.tags a:nth-child(9n+1) {
		color:#428BCA;
		background-color:#428BCA66;
	}
	.tags a:nth-child(9n+2) {
		color:#5CB85C;
		background-color:#5CB85C66;
	}
	.tags a:nth-child(9n+3) {
		color:#D9534F;
		background-color:#D9534F66;
	}
	.tags a:nth-child(9n+4) {
		color:#567E95;
		background-color:#567E9566;
	}
	.tags a:nth-child(9n+5) {
		color:#B433FF;
		background-color:#B433FF66;
	}
	.tags a:nth-child(9n+6) {
		color:#00ABA9;
		background-color:#00ABA966;
	}
	.tags a:nth-child(9n+7) {
		color:#B37333;
		background-color:#B3733366;
	}
	.tags a:nth-child(9n+8) {
		color:#FF6600;
		background-color:#FF660066;
	}
	.tags a {
		opacity:0.9;
		color:#428BCA;
		background-color:#428BCA66;
		display:inline-block;
		margin:0 5px 5px 0;
		padding:0 6px;
		line-height:30px;
		border-radius:4px;
	}
	</style>   
	<p class="tags">
		<a>java</a>
		<a>oracle</a>
		<a>mysql</a>
		<a>redis</a>
		<a>nginx</a>
		<a>spring</a>
		<a>mybatis</a>
	</p>
</body>

预览效果

java oracle mysql redis nginx spring mybatis

1

评论区