老师,为什么last-child效果不对?

老师,为什么last-child效果不对?

相关代码:

        footer .link ul li a:last-child{
margin-right: 0;
}
1
​<!DOCTYPE html><br><html lang="en"><br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>Document</title><br>    <style><br>        *{<br>            margin: 0;<br>            padding: 0;<br>        }<br>        header{<br>            width: 1000px;<br>            height: 100px;<br>            margin: 10px auto;<br>            /* background-color: #333; */<br>        }<br>        header .logo{<br>            float:left;<br>            width: 300px;<br>            height:100px;<br>            background-color: orange;<br>        }<br>        header .login{<br>            float: right;<br>            width: 300px;<br>            height: 30px;<br>            background-color: orangered;<br>        }<br>        header nav{<br>            float:right;<br>            width: 600px;<br>            height: 60px;<br>            margin-top: 10px;<br>            background-color: orchid;<br>        }<br>        section{<br>            width: 1000px;<br>            height: 500px;<br>            margin: 10px auto;<br>            background-color: #333;<br>        }<br>        section aside{<br>            float:left;<br>            width: 390px;<br>            height: 500px;<br>            background-color: peru;<br>        }<br>        section main{<br>            float:right;<br>            width: 600px;<br>            height: 500px;<br>            background-color: #444;<br>        }<br>        section main .content{<br>            width: 600px;<br>            height: 400px;<br>            background-color: royalblue;<br>        }<br>        section main .pics{<br>            width: 600px;<br>            height: 80px;<br>            margin-top: 20px;<br>        }<br>        section main .pics ul{<br>            list-style:none;<br>        }<br>        section main .pics ul li{<br>            float:left;<br>            width: 144px;<br>            height: 80px;<br>            background-color: rgb(71, 180, 243);<br>            margin-right: 8px;<br>        }<br>        section main .pics ul li:last-child{<br>            margin-right: 0;<br>        }<br>        footer{<br>            width: 1000px;<br>            height: 80px;<br>            margin: 0 auto;<br>            background-color: rgba(51, 51, 51, 0.301);<br>        }<br>        footer .link{<br>            width: 1000px;<br>            height: 25px;<br>        }<br>        footer .link ul{<br>            list-style: none;<br><br>        }<br>        footer .link ul li{<br>            float: left;<br>        }<br>        footer .link ul li a{<br>            display: inline-block;<br>            background: rgb(209, 159, 159);<br>            border-radius: 8px;<br>            text-decoration: none;<br>            width: 150px;<br>            height: 25px;<br>            margin-right: 20px;<br>            text-align: center;<br>        }<br>        footer .link ul li a:last-child{<br>            margin-right: 0;<br>        }<br>    </style><br></head><br><body><br>    <header><br>        <div class="logo"></div><br>        <div class="login"></div><br>        <nav></nav><br>    </header><br>    <section><br>        <aside></aside><br>        <main><br>            <div class="content"></div><br>            <div class="pics"><br>                <ul><br>                    <li></li><br>                    <li></li><br>                    <li></li><br>                    <li></li><br>                </ul><br>            </div><br>        </main><br>    </section><br>    <footer><br>        <div class="link"><br>            <ul><br>                <li><a href="">友情链接1</a></li><br>                <li><a href="">友情链接2</a></li><br>                <li><a href="">友情链接3</a></li><br>                <li><a href="">友情链接4</a></li><br>                <li><a href="">友情链接5</a></li><br>                <li><a href="">友情链接6</a></li><br>            </ul><br>        </div><br>        <address></address><br>        <div class="page-info"></div><br>    </footer><br></body><br></html><br>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,last-child是生效了的。具体如下:

http://img1.sycdn.imooc.com//climg/60334feb09943bbd11590754.jpg

祝学习愉快!

  • 慕UI4313976 提问者 #1

    老师是这块:

    http://img1.sycdn.imooc.com//climg/6033aa4409afbb9609820062.jpg

    1
    footer .link ul li a{<br>display: inline-block;<br>background: rgb(209, 159, 159);<br>border-radius: 8px;<br>text-decoration: none;<br>width: 150px;<br>height: 25px;<br>margin-right: 20px;<br>text-align: center;<br>}<br>footer .link ul li a:last-child{<br>margin-right: 0;<br>}


    2021-02-22 20:58:23
  • 樱桃小胖子 回复 提问者 慕UI4313976 #2

    同学你好,首先,last-child是生效了的,从效果图上可以看到,所有a标签的margin-right都是0,a标签之间的间距没有了。那这是什么原因呢?这是由于代码书写不规范导致的,按照同学的写法,footer .link ul li a:last-child是查找每个li里面最后一个子元素a标签,再来看一下html代码结构:

    http://img1.sycdn.imooc.com//climg/6034647509e0244406500381.jpg

    每个a标签都可以看做是li的最后一个子元素,所以footer .link ul li a:last-child这种写法会把所有的a标签的margin-right重置成0,想要实现只有最有一个子元素没有margin-right间距,需要按照如下修改:

    http://img1.sycdn.imooc.com//climg/6034658b09d843bd04690464.jpg

    这样就是查找ul下最有一个子元素li标签了,只有最后一个li标签的margin-right会被重置成0,其他的li标签的margin-right:20px不受影响。

    祝学习愉快!

    2021-02-23 10:19:08
  • 慕UI4313976 提问者 回复 樱桃小胖子 #3

    谢谢老师指导!

    2021-02-23 15:04:48
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码