如何使用CSS修改父母无序列表中的第一个儿童嵌套有序列表

我的目标是通过蓝色制作"水果"，并通过紫色：color.color.ut我不应该使用任何ID或类。我应该使用所有CSS伪类。有人可以帮助我了解它的工作原理吗？我使用此示例：[嵌套的无序列表中的列表中的列表

ul li:last-child ol li {
	color: #2dcc18;
}
ul > li:first-line {
	color: #ddda0f;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
<h2>Garden</h2>
<ul>
	<li>item:
		<ol>
			<li>FRUITS</li>
			<li>FRUITS</li>
			<li>FRUITS</li>
		</ol>
	</li>
	<li>Овощи:
		<ol>
			<li>Помидор</li>
			<li>Картошка</li
		</ol>
	</li>
</ul>
<h2>Garden</h2>
<ul>
	<li>Item:
		<ol>
			<li>CITRUS</li>
			<li>CITRUS</li>
			<li>CITRUS</li>
		</ol>
	</li>
	<li>Овощи:
		<ol>
			<li>Помидор</li>
			<li>Картошка</li
		</ol>
	</li>
</ul>
</body>
</html>

正确制作HTML嵌套列表的方法？

将文本颜色样式限制为第一个或第二个h2元素的顺序列表项，您可以使用：nthtype或：first-type/：last-型伪级，例如：

h2:nth-of-type(1) + ul li:first-child ol li {
    color: blue;
}
h2:nth-of-type(2) + ul li:first-child ol li {
    color: green;
}

或，或者，

h2:first-of-type + ul li:first-child ol li {
    color: blue;
}
h2:last-of-type + ul li:first-child ol li {
    color: green;
}

这应该将第一个H2之后的第一个排序列表的文本设置为蓝色，将第二个H2的文本定为绿色。

相关内容

最新更新

热门标签：