zoukankan      html  css  js  c++  java
  • CSS列表逆序

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

    <ol reversed>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ol>

      效果展示:

      未使用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()接受两个参数,将两个参数用"."分隔开。

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

  • 相关阅读:
    [BZOJ] IOI2015 Boxes纪念品盒
    [BZOJ] 聚会
    [BZOJ] 地精部落
    [BZOJ] 最长距离
    正则
    cookie实例 记住用户名密码
    cookie封装
    碎片整合 例子
    闭包 tab切换 实例
    闭包
  • 原文地址:https://www.cnblogs.com/zhengwin7/p/3995925.html
Copyright © 2011-2022 走看看