如何使用不同的圆环颜色创建有序列表

我正在使用有序列表显示结果。现在我想为颜色从绿色变为红色添加一个圆圈。第一个结果的使用是优先考虑的，而其他的结果则更少。所以颜色渐变从绿色变为红色。如何使用不同的圆环颜色创建有序列表

.listAddress li { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    display: list-item; 
 
    padding: 10px 10px; 
 
    color: #252424; 
 
    font-size: 12px; 
 
    width: auto; 
 
    font-style: normal; 
 
    text-transform: uppercase; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none;

<ol class="listAddress"> 
 
<li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
<li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
<li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
</ol>

来源

2016-12-27 SNT

我不认为会使用纯CSS来实现。它应该需要JavaScript。 – SaidbakR

你期望得到多少结果？您显示的人数是否有上限？ – Jayx

看看这是否有帮助。

jsFiddle

body { background: white; } 
 
.listAddress { 
 
    padding-left: 0; 
 
    position: relative; 
 
} 
 
.listAddress:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -2; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 20px; 
 
    background: linear-gradient(to bottom, green, red); 
 
} 
 
.listAddress li { 
 
    counter-increment: step-counter; 
 
    list-style: none; 
 
    padding-bottom: 20px; 
 
    position: relative; 
 
    padding-left: 25px; 
 
    overflow: hidden; 
 
} 
 
.listAddress li:before { 
 
    content: counter(step-counter); 
 
    margin-right: 5px; 
 
    box-shadow: 0 0 0 100px white; 
 
    color: white; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    top: 0; 
 
    text-align: center; 
 
    width: 20px; 
 
    height: 20px; 
 
}

<ol class="listAddress"> 
 
    <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
    <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
    <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
    <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
    <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li> 
 
</ol>

来源

2016-12-27 20:11:32 Stickers

不是一个完整的答案，但你可以使用：第n个孩子选择它是由最新的浏览器支持。

li:nth-child(1) { color: #636393; } 
li:nth-child(2) { color: #B5222D; } 
li:nth-child(3) { color: #D4953C; } 
li:nth-child(4) { color: #609491; } 
li:nth-child(5) { color: #87A248; }

或者用于全浏览器支持，你可以做到这一点

li { color: #636393; } 
li+li { color: #B5222D; } 
li+li+li { color: #D4953C; } 
li+li+li+li { color: #609491; } 
li+li+li+li+li { color: #87A248; }

但不能li元素编程纯CSS应用梯度。有关于它的JavaScript例子。

来源

2016-12-27 19:46:04

如何使用不同的圆环颜色创建有序列表

回答

相关问题