Question

我的目标是制作＆＃34; FRUITS＆＃34;用蓝色制作＆＃34; CITRUS＆＃34; by purple：color.But我不应该使用任何id或class。我应该使用All CSS Pseudo Classes。任何人都可以帮我理解它的工作原理吗？我使用这个例子：[父排序列表中的嵌套无序列表

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Proper way to make HTML nested list?

Answer 1

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

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的文本设置为绿色。

如何使用CSS

1 个答案: