如何使用升序和降序僅使用HTML和CSS而不是Jquery？

Question

我怎樣才能使與此相反的列表項使用CSS只

<ul> 
    <li>List 1</li> 
    <li>List 2</li> 
    <li>List 3</li> 
    <li>List 4</li> 
    <li>List 5</li> 
</ul> 

Answer 1

@Vipul Nayee請檢查下面的代碼。

ul#top-to-bottom { 
 
    position: absolute; 
 
    width:50px; 
 
    text-align: left; 
 
    float: left; 
 
    -webkit-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
} 
 
ul#top-to-bottom > li { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
    float: right; 
 
    display: block; 
 
    -webkit-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
} 
 
li#a { 
 
    background:blue; 
 
} 
 
li#b { 
 
    background:red; 
 
} 
 
li#c { 
 
    background:purple; 
 
} 
 
li#d { 
 
    background:green; 
 
}

<ul id="top-to-bottom"> 
 
    <li id="a">List 1</li> 
 
    <li id="b">List 2</li> 
 
    <li id="c">List 3</li> 
 
    <li id="d">List 4</li> 
 
</ul>