老师,为什么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 > |
15
收起
正在回答
1回答
同学你好,last-child是生效了的。具体如下:
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧