博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS列表逆序
阅读量:7199 次
发布时间:2019-06-29

本文共 968 字,大约阅读时间需要 3 分钟。

  要使列表逆序的话,大多数人包括我一半都会选择在ol标签里使用reversed属性

  1. first
  2. second
  3. third
  4. fourth
  5. fifth
  6. sixth

  效果展示:

  未使用reversed:使用reversed后:

  但是,reversed有很多的限制,比如,chrome,firebox及safari支持reversed这个逻辑属性,而internet explore和opera不支持该属性,所以在IE及opera里面不能直接在html的使用reversed这个逻辑属性,这样的话,就只能在CSS里面下功夫了……

  

ol {
list-style:none; counter-reset:line 7;}ol > li:before {
counter-increment: line -1; content: counter(line)".";}

  接下来微微解释一下~

  

counter-reset:line 7;

  line处定义的是一个计数器,这个名字可以自己改动,之后的7是该计数器的起始值,起始值在没有设定的情况下默认为0。由于当前我们对同一元素重置和使用时先递增的,所以要设置为7才能保证递减之后第一个是6。

ol > li:before

  这里涉及两个知识点:子元素选择器还有伪元素,子元素选择器只能选择作为某元素子元素的元素,CSS 伪元素用于向某些选择器设置特殊效果。详情得参考知识点~

counter-increment:line -1;

  调用之前设置的计数器line,然后赋值,当赋值为负数(-1)时,该计数器递减处理;相反,当赋值为正,则递增。默认值为1。

content:counter(line)".";

  counter()是一个函数,配合content使用,counter()接受两个参数,将两个参数用"."分隔开。

  正在做网页初级阶段,如果有误请各位大神帮忙指点~

转载于:https://www.cnblogs.com/zhengwin7/p/3995925.html

你可能感兴趣的文章
Gson序列化时@SerializedName的使用
查看>>
windows上pip install 报编码错误
查看>>
boost asio学习笔记 [1] - 同步通讯
查看>>
什么是BMC商业模式?
查看>>
不同浏览器中单选框和文字对齐的兼容
查看>>
Python 浮点数在列表中排序的问题
查看>>
一个失业三年后,又重新找回自信的小伙靠的是什么?
查看>>
JFinal学习-Excel导出
查看>>
linuxbridge 小贴士
查看>>
红旗inWise操作系统V8.0发布了!!!
查看>>
tiles2
查看>>
vi 合并多个文件
查看>>
切换npm源
查看>>
细数JDK里的设计模式
查看>>
Oracle中增加Split函数
查看>>
nagios 报警频率控制
查看>>
scrapy 应用
查看>>
Redis 部署策略
查看>>
2011-04-18 python 文件copy 之道 大全 (转)
查看>>
Mybatis Generator的model生成中文注释,支持oracle和mysql(通过实现CommentGenerator接口的方法来实现)...
查看>>