用last-child 和nth-last-child等伪类时，HTML父容器内不能有其他元素，否则不会生效
下面是正确的写法
<style>
li.heading:last-child {
background: black;
}
li.heading:nth-child(2) {
background: black;
}
</style>
</head>
<body>
<ul>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
</ul>
下面是错误的写法
<!DOCTYPE html>
<html>
<head>
<style>
.dd:last-child
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p class="dd">第一个段落。</p>
<p class="dd">第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>
网友评论