異なるサークルリングカラーで順序付きリストを作成する方法

Question

私は順序付きリストの表示結果を使用しています。今度は、緑色から赤色に変わる色で番号に円を追加したいと思います。最初の結果である使用が優先順位であり、従うべきものはそれ以下である。したがって、色の勾配は緑色から赤色に変化します。

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

Answer 1

これが役立つかどうかを確認してください。

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>

Answer 2

ない完全な答えがありますが、使用することができます：それは、最新のブラウザでサポートされている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; } 

を行うことができます。しかし、純粋なCSSで、プログラムのli要素にグラデーションを適用することはできませんフルブラウザのサポートのため。それについてのjavascriptの例があります。