css案例16——ul无序列表（无li时无样式，有li后出现样式）

一、案例说明

我们知道无序列表中的li一般不是死的，一般都是遍历循环出来的，包括样式也是。现在希望当ul里面没有内容的时候不会出现任何样式，但凡有li，才会出现。
在这里插入图片描述

二、案例演示

1.无li，任何样式都不出现。

请添加图片描述

2.添加li之后

在这里插入图片描述

三、案例讲解

后面灰色背景上下左右是有圆角的。实现：第一个li的左上角和右上角设置圆角，最后一个li左下角和右下角设置圆角。有人问，如果有一个li怎么办，没关系，这时候即是第一个也是最后一个，后面圆角会正常显示。
白色部分四周都是圆角，这是在li里面套了一个超链接。
每个li之间有间隙，我是对li都设置了padding,会有叠加效果，这时候只需要把从第二个开始后面的li的padding去掉即可。

整体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				padding: 50px;
			}
			a{
				display: block;
				border-radius: 5px;
				background-color: #fff;
				padding: 5px;
			}
			li {
				width:200px;
				padding: 5px;
				list-style: none;
				background-color: #f1f1f1;
			}

			li:first-child {
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}

			li:last-child {
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}

			li:nth-child(n+2) {
				padding-top: 0;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">我是0</a></li>
			<li><a href="#">我是1</a></li>
		</ul>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

四、总结

nth-child()的用法：
网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

相关阅读:
求二叉树的宽度（可执行）
Redis面试（二）
机器学习：基于AdaBoost算法模型对信用卡是否违约进行识别
对比表：阿里云轻量应用服务器和服务器性能差异
一条命令彻底卸载Linux自带多个版本jdk
包装类 or 泛型
Nacos集群部署遇到问题
git基础及原理相关解析
Node.js：pnpm - 速度快、节省磁盘空间的软件包管理器
《自动机理论、语言和计算导论》阅读笔记：p261-p314

原文地址：https://blog.csdn.net/xulihua_75/article/details/125446544