列表样式设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
    li:nth-child(2){
     font-size: 30px;
    }
    li:first-child{
     color:red;
    }
</style>
</head>
<body>
    <a href="http://www.imooc.com">点击一下</a>
    <ul>
     <li>aaa</li>
     <li>bbb</li>
     <li>ccc</li>
     <li>
     <ol>
     <li>1111</li>
     <li>2222</li>
     <li>3333</li>
     </ol>
     </li>
    </ul>
</body>
</html>

smallfish001 2019-06-14

源自：CSS入门 4-4 伪类分类

收起

2回答

时间，回答被采纳获得+3积分 2019-06-17 10:42:02

同学，你好。目前阶段同学可以使用列表嵌套的形式来实现。同学可以向后学习4-5 伪类选择器，可以更简单方便的进行设置。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Demo</title>
		<style type="text/css">
			.red {
				color: red;
			}
			.pink li {
				color: blueviolet;
				list-style: none;  /*清除默认样式*/
			}
		</style>
	</head>
	<body>
		<ul class="red">
			<li>
				<ul class="pink">
					<li>123456</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

如果我的回答解决了您的疑惑，请采纳！祝学习愉快~~~~

收起回答

smallfish001 提问者 #1

这样还是有缺陷呀，子列表一看就看出来了，需要是让用户的感知是一个列表的内容，只不过这条内容比较重要。我想要的是这个目的。

2019-06-17 11:33:45
时间，回复提问者 smallfish001 #2

同学可以先向后学习4-5 伪类选择器，先去掉默认样式，再使用:before伪类选择器，可以更方便的实现同学要达到的效果。

2019-06-17 16:54:10