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 class="container">
- <div class="list-parentOuter">
- <div class="list-parentInner">
- <div class="item">AAA</div>
- <div class="item">BBB</div>
- <div class="item">CCC</div>
- </div>
- </div>
- </div>
- </body>
- </body>
- </html>
以上是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
收藏