css parity descendant selector

【Foreword】

      When encountering different style requirements on the left and right sides of the classification bar, the PHP judgment was used before. Now introduce a simpler method, css descendant selector, in addition to adding class name through jquery to achieve

 

【main body】

(1) CSS descendant selector

    ① Odd selector:

 

ul li:nth-child(2n+1){color:red}

    ②Even selector

 

 

ul li:nth-child(2n){color:black}

 

(2) jQuery adds class name

 

var itemList = $('ul li');
for(var i = 0;i<itemList.length;i++){
       if(i%2 == 0){
          $(itemList[i]).find('.port').addClass('red-color');//奇数
      }else{
          $(itemList[i]).find('.port').addClass('black-color');//偶数
      }
}

   Then add the class in css

 

.red-color{color:red;}
.black-color{color:black;}

 

(3) Expansion

In addition to parity, tag cloud-like color assignment can also be achieved

.plinks li:nth-child(2n+0){
    background: #EB6841;
}
.plinks li:nth-child(2n+1){
    background: #20a8fe;
}
.plinks li:nth-child(2n+2){
    background: #FE4365;
}
.plinks li:nth-child(2n+3){
    background: #EDC951;
}
.plinks li:nth-child(2n+4){
    background-color: #5cb85c;
}
.plinks li:nth-child(2n+5){
    background-color: #b433ff;
}
.plinks li:nth-child(2n+6){
    background-color: #567e95;
}
.plinks li:nth-child(2n+7){
    background-color: #f60;

}
.plinks li:nth-child(2n+8){
    background-color: #d9534f;
}
.plinks li:nth-child(2n+8){
    background-color: #d9214f;
}

 

 

 

 

 

 

 

.