HTML :第一个孩子不给出欲望结果

下面的代码将内容附加到 .current 和 .done 的第一个子项之前

.current:first-child::before  {
	content: 'Current ';
color: blue
}
.done:first-child::before {
	content: 'Done ';
color: red
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<ul>
<li class="current">The first li.</li>
<li class="done">The second li.</li>
<li class="done">The third li.</li>
</ul>
</body>
</html>

我无法理解为什么内容"完成"没有附加在"第二个李"之前，即使它是.done的第一个孩子(.done：first-child：：before(

使用:nth-child(n)

了解它：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

在您的情况下，您只需要第一个，因此请使用nth-child(2)

.current:first-child::before  {
	content: 'Current ';
color: blue
}
.done:nth-child(2)::before {
	content: 'Done ';
color: red
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<ul>
<li class="current">The first li.</li>
<li class="done">The second li.</li>
<li class="done">The third li.</li>
</ul>
</body>
</html>

当存在多个类.current或.red时，这也将起作用。

.current > .current::before  {
	content: 'Current ';
color: blue
}
.done > .done::before {
	content: 'Done ';
color: red
}
ul li:not(.done):first-child::before {
content: 'Current ';
color: blue;
}
ul li:not(.done) + .done::before {
content: 'Done';
color: red;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<ul>
<li class="current">The first li.</li>
<li class="current">The first li.</li>
<li class="current">The first li.</li>
<li class="done">The second li.</li>
<li class="done">The third li.</li>
<li class="done">The third li.</li>
<li class="done">The third li.</li>
</ul>
</body>
</html>

相关内容

最新更新

热门标签：