如何使用css为li内的每个span元素添加颜色

Question

Hi there i was trying to add different color for span element by using pseudo. can you help me with that

<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

use :nth-child()

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

and so on

Answer 3

You have to select the correct li cholds to your css elements. For example:

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

You have to fix your css and use 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> 

Also your html is not well-formed ( </i> ).

Answer 5

You could try "nth-of-type" for each li item, like this:

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

You can do the following with Sass:

$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/