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

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

.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>

以上是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

Html/css 列表项 区分列表首尾的更多相关文章

  1. 基于 SwiftUI 创建一个可删除、可添加列表项的列表

    执行环境 macOS Mojave: 10.14.5 xcode: Version 11.0 beta 6 (11M392q) 预览效果 完整代码 import SwiftUI class Item: ...

  2. css那些事儿3 列表与浮动

    一  列表 列表默认为行内块元素,具有宽高,当一个非块元素是无法应用宽高的,比如a 1 有序列表 有ol li组成,其中li为列表项,列表的ol子元素务必为li元素标签,li子内容支持列表任意嵌套,有 ...

  3. Android学习笔记(23):列表项的容器—AdapterView的子类们

    AdapterView的子类的子类ListView.GridView.Spinner.Gallery.AdapterViewFlipper和StackView都是作为容器使用,Adapter负责提供各 ...

  4. 从0开始学FreeRTOS-(列表与列表项)-3

    # FreeRTOS列表&列表项的源码解读     第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在`FreeRTOS`中,列表与列表项使用得非常多 ...

  5. 从0开始学FreeRTOS-(列表&列表项)-6

    # FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...

  6. FreeRTOS列表和列表项

    FreeRTOS中的列表和列表项类似于数据结构中的链表和节点: 相关的文件是list.c和list.h两个文件: List_t列表结构体 具体定义如下: /* * Definition of the ...

  7. CSS：列表样式（设置列表项的标志图案/位置）

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  8. CSS中列表项list样式

    CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...

  9. css如何玩转有序无序列表项list样式

    在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...

  10. CSS 去除列表项li前面的小圆点

    前言 在默认的情况下,浏览器会在<li>标签前面加上小圆点形成列表项,如下所示使用<ul> 项1 项2 项3 或者使用<ol> 项1 项2 项3 这在有时候确实给我 ...

随机推荐

  1. java文本转语音

    下载jar包https://github.com/freemansoft/jacob-project/releases 解压,将jacob-1.18-xxx.dll相应放到项目使用的JAVA_HOME ...

  2. SQL Server获取连接的IP地址

    来源:http://www.itpub.net/thread-193247-1-1.html 先保存,以后研究一下 1 *--获取连接SQL服务器的信息 2 3 所有连接本机的:操作的数据库名,计算机 ...

  3. MATLAB画图自动确定坐标范围（GUI）

    今天在用MATLAB做我的毕设的时候碰到一个很纠结的问题,之所以说纠结是因为我觉得这个问题很简单,可是一时半会就是弄不出来(ー`´ー).鼓捣了半个小时左右吧,终于搞出来了.下面做个纪念: 问题描述 在 ...

  4. 解决idea xml文件中的中文注释乱码

    今天用idea编译xml文件的时候报错了,打开编译好的xml文件发现是中文乱码问题,按照百度上靠前的办法设置了一下,并没有解决乱码问题,在当前项目中直接设置就是不生效,最后删掉编译好的 target/ ...

  5. vue项目怎么链接开发服务器

    在前后端分离的前提下,完成前端的页面开发,就可以开始链接开发服务器 安装axios到项目中 npm install axios --save 安装完成后问你的后端开发人员要IP 后端会给一个IP以及端 ...

  6. reduce处理相同id合并对象内容为数组

    例: let arr = [     {         situationId: '666666666666666666666',         cloundClass: '999',     } ...

  7. Web For Pentester - SQL injections/Directory traversal

    SQL injections Example 1 典型的SQL注入 name=root' or 1=1 %23 直接执行就可以导出所有用户 查看后端的源码 观察到,我们传入入的name中,传入就成为了 ...

  8. 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(11)-Charles如何模拟弱网环境

    1.前言 张三:"我写的软件好奇怪啊,在网络好的时候一点问题也没有,但是信号差的时候明显卡顿,看来我只能一直蹲在卫生间.电梯或者地铁(信号差)调bug了". Charles:&qu ...

  9. 给生活加点惊喜，做创意生活的原型设计师丨编程挑战赛 x 选手分享

    前言 做产品的大都跳过一个坑:我有了一个很好的产品创意,只差一个程序员帮我实现编程了. 事实上从产品创意到落地上线,中间需要经过非常复杂的过程,细节的逻辑流程才是难点,创意不能落地,并不值钱. 本文作 ...

  10. Java程序死锁问题定位与解决

    更多内容,前往 IT-BLOG 一.概述 死锁是指两个或两个以上的进程在执行过程中,因争抢资源而造成的一种互相等待的现象,若无外力干涉它们将无法推进,如果系统资源充足,进程的资源请求能够得到满足,死锁 ...