CSS注意事项

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 12,124评论 1 62
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 5,859评论 0 5
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,709评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,060评论 0 1
  • CSS选择器结构逻辑图 接下来按照结构逻辑图具体讲解各个选择器的作用及用法; 基本选择器 基本选择器主要有以下5类...
    FoolishFlyFox阅读 3,712评论 0 8

友情链接更多精彩内容