Html/css 列表项区分列表首尾

列表项，有时需要判断列表首尾，来筛选设置样式

如上图，三个项有间隔，怎么保证设置了列表项之间的距离后，整体还水平居中显示呢？

.item:not(:first-child) {
　　margin-left: 20px;
}

 1 <!DOCTYPE html> 2 <html> 3 <head>     4 <meta charset="UTF-8">     5 <title>Document</title>     6 <style type="text/css"> 7 .container { 8   width:600px; 9   height:300px;10   background: rgba(4,0,255,0.50);11 }12 .list-parentOuter {13   float: left;14   margin-left: 50%;15 }16 .list-parentInner {17   position: relative;18   right: 50%;19   display: flex;20   flex-direction: row;21   justify-items: center;22   margin-top:50px;23 }24 .item{25   height: 120px;26   width: 120px;27   border: 1px solid #04D18D;28   background-color:#04D18D;29   border-radius: 60px;30   color:#ffffff;31   text-align:center;32   line-height:120px;33   margin: 0px auto;34 }35 .item:not(:first-child) {36   margin-left: 20px;37 }38 </style>39 40 </head>41 <body>   42 <body>43   <div class="container">44     <div class="list-parentOuter">45       <div class="list-parentInner">46         <div class="item">AAA</div>47         <div class="item">BBB</div>48         <div class="item">CCC</div>49       </div>50     </div>51   </div>52 </body>　53 </body>54 </html>

View Code

以上是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)，以类型筛选第一个元素。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。