如何使用css爲裏面的每個span元素添加顏色

Question

嗨，我試圖通過使用僞元素爲span元素添加不同的顏色。你能幫助我與

<ol class="hidden-xs"> 
    <li class="active dt-nav"><span class="dot-nav">1</span></li> 
    <li class="dt-nav"><span class="dot-nav">2</span></li> 
    <li class="dt-nav"><span class="dot-nav">3</span></li> 
    <li class="dt-nav"><span class="dot-nav">4</span></li> 
</ol> 

Answer 1

.dt-nav:nth-child(1) { 
    color:red; 
} 
.dt-nav:nth-child(2) { 
    color:blue; 
} 
.dt-nav:nth-child(3) { 
    color:green; 
} 
.dt-nav:nth-child(4) { 
    color:orange; 
} 

Answer 2

使用：第n個孩子（）

li span:nth-child(1) { 
    color: green; 
} 
li span:nth-child(2) { 
    color: red; 
} 
li span:nth-child(3) { 
    color: blue; 
} 

等

Answer 3

你必須選擇正確的李cholds到你的CSS元素。例如：

ol.hidden-xs > li:first-child > span.dot-nav { 
    color: #000000; 
} 

ol.hidden-xs > li:nth-child(2) > span.dot-nav { 
    color: #333333; 
} 

ol.hidden-xs > li:nth-child(3) > span.dot-nav { 
    color: #db0036; 
} 

ol.hidden-xs > li:last-child > span.dot-nav { 
    color: #cccccc; 
} 

Answer 4

你必須解決你的CSS和使用proper selectors：

ol > li.dt-nav:nth-child(1) > .dot-nav { 
 
    background: red; 
 
} 
 

 
ol > li.dt-nav:nth-child(2) > .dot-nav { 
 
    background: black; 
 
} 
 

 
ol > li.dt-nav:nth-child(3) > .dot-nav { 
 
    background: red; 
 
} 
 

 
ol > li.dt-nav:nth-child(4) > .dot-nav { 
 
    background: black; 
 
}

<ol class="hidden-xs"> 
 
    <li class="active dt-nav"><span class="dot-nav">1</span></li> 
 
    <li class="dt-nav"><span class="dot-nav">2</span></li> 
 
    <li class="dt-nav"><span class="dot-nav">3</span></li> 
 
    <li class="dt-nav"><span class="dot-nav">4</span></li> 
 
</ol>

而且你的HTML沒有很好地形成（</i>）。

Answer 5

你可以試試 「第n-的型」 爲每立項目，像這樣：

li:nth-of-type(1) span { color: red; } 
li:nth-of-type(2) span { color: white; } 
li:nth-of-type(3) span { color: blue; } 
li:nth-of-type(4) span { color: rebeccapurple; } 

Answer 6

你可以做薩斯如下：

$colors: orange, blue, red, green; 

li { 
    @for $i from 1 to 5 { 

    &:nth-child(#{$i}) { 
     span { 
     $color: nth($colors, $i); 
     color: $color; 
     } 
    } 
    } 
} 

https://jsfiddle.net/o6w613y3/1/