CSS注意事项

作者: solaman | 来源:发表于2017-06-23 16:19 被阅读0次

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