应用CSS挑选器来分辨目录首行与尾行的方式

摘要: Html/css 目录项 区别目录首尾目录项,有时候必须分辨目录首尾,来挑选设定款式如圖,三个项有间距,如何确保设定了目录项中间的间距后,总体还水准垂直居中显示信息呢?.item:no...

Html/css 目录项 区别目录首尾

目录项,有时候必须分辨目录首尾,来挑选设定款式

如圖,三个项有间距,如何确保设定了目录项中间的间距后,总体还水准垂直居中显示信息呢?

.item:not(:first-child) {

margin-left: 20px;

 !DOCTYPE html   html   head   meta charset= UTF-8   title Document /title   style type= text/css  .container { width:600px; height:300px; background: rgba(4,0,255,0.50); } .list-parentOuter { float: left; margin-left: 50%; } .list-parentInner { position: relative; right: 50%; display: flex; flex-direction: row; justify-items: center; margin-top:50px; } .item{ height: 120px; width: 120px; border: 1px solid #04D18D; background-color:#04D18D; border-radius: 60px; color:#ffffff; text-align:center; line-height:120px; margin: 0px auto; } .item:not(:first-child) { margin-left: 20px; }  /style   /head   body   body   div  >

 之上是CSS :first-child 挑选器的使用方法

:first-child 挑选器用以选择归属于其父原素的首例子原素的特定挑选器。

大量的,也有其他的特定原素挑选器:

:last-child  挑选归属于其父原素最终一身高原素。

:nth-child(2) 挑选第二个原素

:nth-last-child(2) 挑选倒数第二个原素

也有first-of-type、last-of-type、nth-of-type(2)、nth-last-of-type(2),以种类挑选第一个原素。

大量原素挑选器,浏览 w3school

标识: CSS实例教程 挑选器


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:顽兔抠图