在Jquery或Javascript中更改第n个类的CSS

Question

我正在尝试在下面的代码中更改第5个infobox（类）的文本颜色。文本颜色会发生变化，但对于所有信息框。

//INFOBOX5
var json_data = {"headers":["Platform","Value1","value1","valueP1","valueP2"],"rows":[["platform2","xxx",404.07000000000005,1634,6364],["platform5","xxx",404.07000000000005,1634,6364],["platform1","xxx",352.8,1634,6364],["platform3","xxx",352.8,1634,6364],
["platform3","xxx",352.8,1634,6364],["platform4","xxx",352.8,1634,6364]]};

    var platform_data = json_data.rows;
    var platform1_element = document.getElementById("platform1");
    var platform5_element = document.getElementById("platform5");
    var platform6_element = document.getElementById("platform6");
    var platform2_element = document.getElementById("platform2");
    var platform3_element = document.getElementById("platform3");
    var platform4_element = document.getElementById("platform4");

    function onlyUnique(value, index, self) { 
        return self.indexOf(value) === index;
    }
    function formatNumber (num) {
        return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
    }
    var platforms = [];
    for (var i in platform_data) {
        if (platform_data[i][0] != null){
            platforms[i] = platform_data[i][0].toLowerCase();
        }
    }
  
    var unique_platforms = platforms.filter( onlyUnique );

    var target_width = 100/(unique_platforms.length-2);
    var width_str=target_width+"%";

    platform1_element.classList.add("hidden");
    platform5_element.classList.add("hidden");
    platform6_element.classList.add("hidden");
    platform3_element.classList.add("hidden");
    platform2_element.classList.add("hidden");
    platform4_element.classList.add("hidden");
   
    var total_value1 = 0;
    var total_value2 = 0;
    var total_display_value1 = 0;
    var total_video_value1 = 0;
    var total_mixed_value1 = 0;
    var total_other_value1 = 0;
    var total_display_value2 = 0;
    var total_video_value2 = 0;
    var total_mixed_value2 = 0;
    var value2_numbers = [];
    
    for (var i in unique_platforms) {
        var platform_name = unique_platforms[i].toLowerCase();

        var display_value1_total = 0;
        var display_value2_total = 0;
        var video_value1_total = 0;
        var video_value2_total = 0;
        var mixed_value1_total = 0;
        var mixed_value2_total = 0;
        var other_value1_total = 0;        

        for (var x in platform_data){
            if (platform_data[x][0] != null){
                    if(platform_data[x][0].toLowerCase() == platform_name){
                    switch(platform_data[x][1]) {
                        case "display":
                        // Red Dot
                        display_value1_total = display_value1_total + platform_data[x][2];
                        total_value1 = total_value1 + display_value1_total;
                        break;
                        case "video":
                        video_value1_total = video_value1_total + platform_data[x][2];
                        total_value1 = total_value1 + video_value1_total;
                        break;
                        case "mixed":
                        mixed_value1_total = mixed_value1_total + platform_data[x][2];
                        total_value1 = total_value1 + mixed_value1_total;
                        break;
                        case "Other":
                        other_value1_total = other_value1_total + platform_data[x][2];
                        total_value1 = total_value1 + other_value1_total;
                        break;
                        default:
                        doNothing = "";
                    }
                }
            }else {
                value2_numbers = platform_data[x];
            }            
        }

        var platform_value1 = display_value1_total + video_value1_total + mixed_value1_total + other_value1_total;
        var generic_element = document.getElementById(platform_name);

        var element_value1_name = platform_name+"_value1";
        var fl_value1 = parseFloat(platform_value1).toFixed(0);
        var curr_flag = "€"+formatNumber(fl_value1);
        document.getElementById(element_value1_name).innerHTML = curr_flag;

        total_display_value1 = total_display_value1 + display_value1_total;
        total_video_value1 = total_video_value1 + video_value1_total;
        total_mixed_value1 = total_mixed_value1 + mixed_value1_total;
    }

    var total_value1_string = "<h1>&euro;" + formatNumber(Number(total_value1).toFixed(0)) + "</h1>";
    //document.getElementById("total_value1").innerHTML = total_value1_string;

  if (value2_numbers.length == 0){
      value2_numbers = platform_data[0];
  }
  var fl_value2 = 0;
  var curr_flag_bud = '';
  var element_value2_name = '';

  
  for (var i in json_data.headers){  
      switch(json_data.headers[i]) {
            case "valueP1":
                    element_value2_name = "platform1_value2";
                    fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
                    curr_flag_bud = "&euro;"+formatNumber(fl_value2);
                    document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
                    break;
      		case "valueP2":
                    element_value2_name = "platform2_value2";
                    fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
                    curr_flag_bud = "&euro;" +formatNumber(fl_value2);
                    document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
                    break;    
          	case "valueP1":
                    element_value2_name = "platform1_value2";
                    fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
                    curr_flag_bud = "&euro;" +formatNumber(fl_value2);
                    document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
                    break;
                    default:
         } 
    }
    
    var statBox = Array.from(document.querySelectorAll('.infobox'));

    var element_id;
    
    var parentBoxlist = Array.from(document.querySelectorAll('.parentbox'));

    var channel_value1_check = 0;
    var value1_channels = [];

 //   if (total_mixed_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[0] = 'mixed';};
 //   if (total_video_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[1] = 'video';};
 //   if (total_display_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[2] = 'display';};

    statBox.forEach(function(box) {
        switch(unique_platforms.length) {
            case 1:
                    // 1 box
                    element_id = box.getAttribute('id');
                    if (unique_platforms.includes(element_id)){
                        box.classList.add('infobox1'); 
                        box.classList.remove('hidden');
                    }
                    break;
                    case 2:
                    // 2 box's
                    element_id = box.getAttribute('id');
                    if (unique_platforms.includes(element_id)){
                        box.classList.add('infobox2'); 
                        box.classList.remove('hidden');
                    }
                    break;
                    case 3:
                    // 3 box's
                     element_id = box.getAttribute('id');
                    if (unique_platforms.includes(element_id)){
                        box.classList.add('infobox3'); 
                        box.classList.remove('hidden');
                    }
                    break;  
                    case 4:
                    // 4 box's
                     element_id = box.getAttribute('id');
                    if (unique_platforms.includes(element_id)){
                        box.classList.add('infobox4'); 
                        box.classList.remove('hidden');
                    }
                    break;
                    case 5:
                    // 5 box's
                    element_id = box.getAttribute('id');
                    if (unique_platforms.includes(element_id)){
                        box.classList.add('infobox5'); 
                        box.classList.remove('hidden');
                    } 
                    break;
                    default:
                }
            });

$(".boxbox:nth-of-type(1)").css("color", "#fff");

@import url('https://fonts.googleapis.com/css?family=Roboto');

    body{
    color: #fff;
    font-family: Roboto;
    margin:0;
    overflow:hidden;
    }
    h1{
    font-size: 1.2vw;
    }
    h3{
    font-size: 1.1vw!important;
    font-weight: 100;
    margin: 0;
    padding: 5px;
    }
    .redSq{
    background-color: #ff000a;
    width: 117px;
    height: 241px;
    float:left;
    }
.row {
    display: table;
    width: 99.8%;
    height: 180px; 
    color: #454545;
    background-color:#dee9f3;
    //border: solid 1px #454545; 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    margin-bottom: 10px;
}
.row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  padding: 15px;
  margin: 5px;
  flex: 0 0 calc(100% - 20px);
  text-align: left;
}
td{
  padding: 2px 2px;
  text-align: center;
  margin: 6px 0;
  border: none;
}
table{
  width: 100%;
  background-color:#454545;
  font-weight:500;
  border-collapse: separate;
  border-spacing:0.3em 1.1em;
  color: #fff;
  border: 0;
}
p{
    font-size: 1.2vw;
}
    .boxes{
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 5%;
    min-width: 200px;
    float:left;
    display: inline-block;
    }

    #line{
    border-bottom: solid 1px #CCC;
    margin-top: 0px;
    padding-top: 15px;
    }

    .infobox {
    float:left;
    margin: 0;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    color: #454545;
    }

    .infobox1 {
    float:left;
    min-height:150px;
    min-width: 100%;
    margin: 0; 
    }

    .infobox2 {
    float:left;
    min-height:150px;
    min-width: 49%;
    margin: 0 0.5%;
    //padding: 18px 0;
    }

    .infobox3 {
    float:left;
    min-height:150px;
    min-width: 32.33%;
    margin: 0 0.5%;
    //padding: 18px 0;
    }

    .infobox4 {
    float:left;
    //min-height:150px;
    min-width: 23.9%;
    margin: 0 0.5%;
    //padding: 18px 0;
    }

    .infobox5 {
    float:left;
    min-height:150px;
    min-width: 32.33%;
    margin: 0 0.5% 0.7%;
    //padding: 18px 0;
    }

    div.leftBox{
    float:left;
    width:60%;
    margin: 15px 0 0 25px;
    font-size: 1.1vw;    
    }
    div.rightBox{
    float:left;
    width: 60%;
    margin: 15px 0 0 25px;
    font-size: 1.1vw;
    }

    .infocontentheader {
    //text-align: center;
    line-height: 2.8;
    //color: #fff;
    vertical-align: middle;
    height: 100%;
    float:left;
    width:25%;
    }

    .infocontent{
    text-align: center;
    color: #fff;
    width: 50%;
    float: left;
    }


    div#platform1.infocontentheader{
    background-color: #3c5999;
    }

    div#platform1.infobox img{
        display: block;
        margin: 0 auto 0 auto;
    }

    p#sTitle {
         font-weight: 900;
         font-size: 1.5vw;
     }

     p#bTitle {
         //font-weight: 900;
         font-size: 1.2vw;
     }

     p#platform1_value1, p#platform5_value1, p#platform4_value1 ,p#platform3_value1, 
     p#platform2_value1, p#twitter_value1 {
         font-weight: 900;
         font-size: 1.3em;
         margin: 10px 0 0 20px;
     }

     p#platform1_budget, p#platform5_budget, p#platform4_budget, p#platform3_budget,
     p#platform2_budget, p#twitter_budget{
        font-size: 1.2em;
        margin: 10px 0 0 20px;        
     }

    div#twitter.infocontentheader{
    background-color: #1da1f2;
    }
    div#twitter.infobox img{
        display: block;
        margin: 0 auto 0 auto;
    }


    div#platform3.infocontentheader{
    background-color: #a15aa0;
    }

    div#display.parentbox{
    background-color: #b3b3b3;
    color: #fff;
    }

    div#video.parentbox{
    background-color: #999999;
    color: #fff;
    }

    div#mixed.parentbox{
    background-color: #c1c1c1;
    color: #fff;
    }

    #platform3 div.infocontentheader{
    color: #fff;
    }
    div#platform3.infobox img{

        display: block;
        margin: 0 auto 0 auto;
    }

    div#platform3_value.infocontent{
    color: #000;
    }

    div#platform5.infocontentheader{
    background-color: #ff0102;
    }
    div#platform5.infobox img{
    display: block;
    margin: 0 auto 0 auto;
    }
    div#platform4.infocontentheader{
        background-color: #cac9c2;
    }
    div#platform4.infobox img{
        display: block;
        margin: 10% auto 0 auto;
    }
  div#platform2.infobox{
    background-color: #fff;
    }
    div#platform2.infobox img{
    display: block;
    margin: 10% auto 0 auto;
    }

    .hidden{
    display:none;
    }
    
    #parent_div_1{
        width:50%;
        min-height: 150px;
        background-color: #757476;
        margin-right:0px;
        float:left;
    }
    #parent_div_2{
        width:50%;
        min-height: 150px;
        background-color: #8D8D8D;
        margin-right:0px;
        float:left;
    }
    .parentbox{
        width:33.33%;
        min-height: 150px;
        /*background-color: #8D8D8D;*/
        margin-right:0px;
        float:left;
    }
    .parentbox1{
        width:100%;
        min-height: 150px;
        margin-right:0px;
        float:left;
    }
    .parentbox2{
        width:50%;
        min-height: 150px;
        margin-right:0px;
        float:left;
    }
    .parentbox3{
        width:33.33%;
        min-height: 150px;
        margin-right:0px;
        float:left;
    }
    .child_div_1{
    margin-top: 50px;
    margin-left: 15%;
    margin-bottom: 0px;
    text-align: left;
    }
    .child_div_2{
    margin-left: 15%;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: left;
    }
     .child_budget{
    margin-top: 10px;
    margin-bottom: 40px;
    padding-left:15%;
    text-align: left;
    float: left;
    }
    .child_value1{
    margin-top: 10px;
    margin-bottom: 40px;
    padding-right: 15%;
    text-align: left;
    float:right;
    }
     .child_title{
    margin-top: 50px;
    margin-bottom: 0px;
    text-align: center;
    }
    .child_budget_number{
        padding-right: 20%;
    }
    .child_value1_number{
        padding-left: 20%;
    }

.boxbox {
    display: table;
    width: 99.8%;
    height: 160px;
    color: #454545;
    font-size:1.1vw;
}

.boxbox {
    float:left;
    display: table;
    width: 99.8%;
    height: 180px; 
    color: #454545;
}
.boxbox > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="wrapper2" style="height:160px;">
<div class="infobox" id="platform1">
<div class="boxbox">
  <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform1_value1"></div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform1_value2"></div>
      </div>
    </div>
  </div>
</div>
</div> 
<div class="infobox" id="platform6">
<div class="boxbox">
  <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform6_value1"></div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform6_value2"></div>
      </div>
    </div>
  </div>
</div>
</div> 
<div class="infobox" id="platform3">
<div class="boxbox">
  <div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform3_value1"></div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform3_value2"></div>
      </div>
    </div>
  </div>
</div>
</div> 
<div class="infobox" id="platform5">
<div class="boxbox" id="platform5">
  <div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform5_value1"></div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform5_value2"></div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="infobox" id="platform4">
<div class="boxbox">
  <div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform4_value1"></div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform4_value2"></div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="infobox" id="platform2">
<div class="boxbox" id="platform2">
  <div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform2_value1"></div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform2_value2"></div>
      </div>
    </div>
  </div>
</div>
</div> 
</div>

Answer 1

使用：element.eq（n）;其中n是元素的索引值

Answer 2

它运行正常，但你有这种内联样式style="color: rgb(255, 255, 255);"，它还添加了白色，你在.boxbox上添加了另一种颜色的CSS样式。

以下是删除所有这些样式后的代码：

＆＃13;

＆＃13;

$(".infobox5:nth-of-type(3)").css("color", "#fff");

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  color: #fff;
  font-family: Roboto;
  margin: 0;
  overflow: hidden;
}

h1 {
  font-size: 1.2vw;
}

h3 {
  font-size: 1.1vw!important;
  font-weight: 100;
  margin: 0;
  padding: 5px;
}

.redSq {
  background-color: #ff000a;
  width: 117px;
  height: 241px;
  float: left;
}

.row {
  display: table;
  width: 99.8%;
  height: 180px;
  color: #454545;
  background-color: #dee9f3;
  //border: solid 1px #454545; 
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  margin-bottom: 10px;
}

.row>.col-lg-6 {
  display: table-cell;
  vertical-align: middle;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  padding: 15px;
  margin: 5px;
  flex: 0 0 calc(100% - 20px);
  text-align: left;
}

td {
  padding: 2px 2px;
  text-align: center;
  margin: 6px 0;
  border: none;
}

table {
  width: 100%;
  background-color: #454545;
  font-weight: 500;
  border-collapse: separate;
  border-spacing: 0.3em 1.1em;
  color: #fff;
  border: 0;
}

p {
  font-size: 1.2vw;
}

.boxes {
  padding-top: 40px;
  padding-left: 30px;
  padding-right: 5%;
  min-width: 200px;
  float: left;
  display: inline-block;
}

#line {
  border-bottom: solid 1px #CCC;
  margin-top: 0px;
  padding-top: 15px;
}

.infobox {
  float: left;
  margin: 0;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  color: #454545;
}

.infobox1 {
  float: left;
  min-height: 150px;
  min-width: 100%;
  margin: 0;
}

.infobox2 {
  float: left;
  min-height: 150px;
  min-width: 49%;
  margin: 0 0.5%;
  //padding: 18px 0;
}

.infobox3 {
  float: left;
  min-height: 150px;
  min-width: 32.33%;
  margin: 0 0.5%;
  //padding: 18px 0;
}

.infobox4 {
  float: left;
  //min-height:150px;
  min-width: 23.9%;
  margin: 0 0.5%;
  //padding: 18px 0;
}

.infobox5 {
  float: left;
  min-height: 150px;
  min-width: 32.33%;
  margin: 0 0.5% 0.7%;
  //padding: 18px 0;
}

div.leftBox {
  float: left;
  width: 60%;
  margin: 15px 0 0 25px;
  font-size: 1.1vw;
}

div.rightBox {
  float: left;
  width: 60%;
  margin: 15px 0 0 25px;
  font-size: 1.1vw;
}

.infocontentheader {
  //text-align: center;
  line-height: 2.8;
  //color: #fff;
  vertical-align: middle;
  height: 100%;
  float: left;
  width: 25%;
}

.infocontent {
  text-align: center;
  color: #fff;
  width: 50%;
  float: left;
}

div#facebook.infocontentheader {
  background-color: #3c5999;
}

div#facebook.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

p#sTitle {
  font-weight: 900;
  font-size: 1.5vw;
}

p#bTitle {
  //font-weight: 900;
  font-size: 1.2vw;
}

p#facebook_spend,
p#youtube_spend,
p#search_spend,
p#programmatic_spend,
p#instagram_spend,
p#twitter_spend {
  font-weight: 900;
  font-size: 1.3em;
  margin: 10px 0 0 20px;
}

p#facebook_budget,
p#youtube_budget,
p#search_budget,
p#programmatic_budget,
p#instagram_budget,
p#twitter_budget {
  font-size: 1.2em;
  margin: 10px 0 0 20px;
}

div#twitter.infocontentheader {
  background-color: #1da1f2;
}

div#twitter.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

div#programmatic.infocontentheader {
  background-color: #a15aa0;
}

div#display.parentbox {
  background-color: #b3b3b3;
  color: #fff;
}

div#video.parentbox {
  background-color: #999999;
  color: #fff;
}

div#mixed.parentbox {
  background-color: #c1c1c1;
  color: #fff;
}

#programmatic div.infocontentheader {
  color: #fff;
}

div#programmatic.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

div#programmatic_value.infocontent {
  color: #000;
}

div#youtube.infocontentheader {
  background-color: #ff0102;
}

div#youtube.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

div#search.infocontentheader {
  background-color: #cac9c2;
}

div#search.infobox img {
  display: block;
  margin: 10% auto 0 auto;
}

div#instagram.infobox {
  background-color: #fff;
}

div#instagram.infobox img {
  display: block;
  margin: 10% auto 0 auto;
}

.hidden {
  display: none;
}

#parent_div_1 {
  width: 50%;
  min-height: 150px;
  background-color: #757476;
  margin-right: 0px;
  float: left;
}

#parent_div_2 {
  width: 50%;
  min-height: 150px;
  background-color: #8D8D8D;
  margin-right: 0px;
  float: left;
}

.parentbox {
  width: 33.33%;
  min-height: 150px;
  /*background-color: #8D8D8D;*/
  margin-right: 0px;
  float: left;
}

.parentbox1 {
  width: 100%;
  min-height: 150px;
  margin-right: 0px;
  float: left;
}

.parentbox2 {
  width: 50%;
  min-height: 150px;
  margin-right: 0px;
  float: left;
}

.parentbox3 {
  width: 33.33%;
  min-height: 150px;
  margin-right: 0px;
  float: left;
}

.child_div_1 {
  margin-top: 50px;
  margin-left: 15%;
  margin-bottom: 0px;
  text-align: left;
}

.child_div_2 {
  margin-left: 15%;
  margin-top: 10px;
  margin-bottom: 40px;
  text-align: left;
}

.child_budget {
  margin-top: 10px;
  margin-bottom: 40px;
  padding-left: 15%;
  text-align: left;
  float: left;
}

.child_spend {
  margin-top: 10px;
  margin-bottom: 40px;
  padding-right: 15%;
  text-align: left;
  float: right;
}

.child_title {
  margin-top: 50px;
  margin-bottom: 0px;
  text-align: center;
}

.child_budget_number {
  padding-right: 20%;
}

.child_spend_number {
  padding-left: 20%;
}

.boxbox {
  display: table;
  width: 99.8%;
  height: 160px;
  font-size: 1.1vw;
}

.boxbox {
  float: left;
  display: table;
  width: 99.8%;
  height: 180px;
}

.boxbox>.col-lg-6 {
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div id="wrapper2" style="height:160px;">
  <div class="infobox infobox5" id="platform1">
    <div class="boxbox" >
      <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
        <img src="">
      </div>
      <div class="col-lg-6" style="float: left;">
        <div class="container">
          <div id="sTitle">value1<br>
            <div id="platform1_value1">353</div>
          </div>
          <div id="bTitle">value2<br>
            <div id="platform1_value2">1,634</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="infobox hidden" id="platform6">
    <div class="boxbox" >
      <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
        <img src="">
      </div>
      <div class="col-lg-6" style="float: left;">
        <div class="container">
          <div id="sTitle">value1<br>
            <div id="platform6_value1"></div>
          </div>
          <div id="bTitle">value2<br>
            <div id="platform6_value2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="infobox infobox5" id="platform5">
    <div class="boxbox" >
      <div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
        <img src="">
      </div>
      <div class="col-lg-6" style="float: left;">
        <div class="container">
          <div id="sTitle">value1<br>
            <div id="platform5_value1">706</div>
          </div>
          <div id="bTitle">value2<br>
            <div id="platform5_value2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="infobox infobox5" id="platform3">
    <div class="boxbox" id="platform3" >
      <div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
        <img src="">
      </div>
      <div class="col-lg-6" style="float: left;">
        <div class="container">
          <div id="sTitle">value1<br>
            <div id="platform3_value1">404</div>
          </div>
          <div id="bTitle">value2<br>
            <div id="platform3_value2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="infobox infobox5" id="platform4">
    <div class="boxbox" >
      <div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
        <img src="">
      </div>
      <div class="col-lg-6" style="float: left;">
        <div class="container">
          <div id="sTitle">value1<br>
            <div id="platform4_value1">353</div>
          </div>
          <div id="bTitle">value2<br>
            <div id="platform4_value2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="infobox infobox5" id="platform2">
    <div class="boxbox" id="platform2" >
      <div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
        <img src="">
      </div>
      <div class="col-lg-6" style="float: left;">
        <div class="container">
          <div id="sTitle">value1<br>
            <div id="platform2_value1">404</div>
          </div>
          <div id="bTitle">value2<br>
            <div id="platform2_value2">6,364</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的类容器infobox5的直接子级正在覆盖Jquery方法的CSS颜色。您必须先删除它，然后使用它，如下所示：

Note- .eq(index) is better suited for your query in contrast to :nth-of-type(index). You can try them both and see it for yourself.

指针：

• 清理你的CSS，已经实现了很多不必要的样式但是对于这个查询，正如另一个答案所提到的那样.boxbox类正在实现自己的颜色样式，并且正如所提到的，带有类infobox5的div的子代也是实现自己的颜色样式，覆盖在父容器上实现的JQuery css。

$(".infobox5").eq(4).css("color", "green"); //Index starts from 0 for 1st element, 1 for 2nd and so on 4 for 5th element of type .infobox5

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  color: #fff;
  font-family: Roboto;
  margin: 0;
  overflow: hidden;
}

h1 {
  font-size: 1.2vw;
}

h3 {
  font-size: 1.1vw!important;
  font-weight: 100;
  margin: 0;
  padding: 5px;
}

.redSq {
  background-color: #ff000a;
  width: 117px;
  height: 241px;
  float: left;
}

.row {
  display: table;
  width: 99.8%;
  height: 180px;
  color: #454545;
  background-color: #dee9f3;
  //border: solid 1px #454545; 
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  margin-bottom: 10px;
}

.row>.col-lg-6 {
  display: table-cell;
  vertical-align: middle;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  padding: 15px;
  margin: 5px;
  flex: 0 0 calc(100% - 20px);
  text-align: left;
}

td {
  padding: 2px 2px;
  text-align: center;
  margin: 6px 0;
  border: none;
}

table {
  width: 100%;
  background-color: #454545;
  font-weight: 500;
  border-collapse: separate;
  border-spacing: 0.3em 1.1em;
  color: #fff;
  border: 0;
}

p {
  font-size: 1.2vw;
}

.boxes {
  padding-top: 40px;
  padding-left: 30px;
  padding-right: 5%;
  min-width: 200px;
  float: left;
  display: inline-block;
}

#line {
  border-bottom: solid 1px #CCC;
  margin-top: 0px;
  padding-top: 15px;
}

.infobox {
  float: left;
  margin: 0;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  color: #454545;
}

.infobox1 {
  float: left;
  min-height: 150px;
  min-width: 100%;
  margin: 0;
}

.infobox2 {
  float: left;
  min-height: 150px;
  min-width: 49%;
  margin: 0 0.5%;
  //padding: 18px 0;
}

.infobox3 {
  float: left;
  min-height: 150px;
  min-width: 32.33%;
  margin: 0 0.5%;
  //padding: 18px 0;
}

.infobox4 {
  float: left;
  //min-height:150px;
  min-width: 23.9%;
  margin: 0 0.5%;
  //padding: 18px 0;
}

.infobox5 {
  float: left;
  min-height: 150px;
  min-width: 32.33%;
  margin: 0 0.5% 0.7%;
  //padding: 18px 0;
}

div.leftBox {
  float: left;
  width: 60%;
  margin: 15px 0 0 25px;
  font-size: 1.1vw;
}

div.rightBox {
  float: left;
  width: 60%;
  margin: 15px 0 0 25px;
  font-size: 1.1vw;
}

.infocontentheader {
  //text-align: center;
  line-height: 2.8;
  //color: #fff;
  vertical-align: middle;
  height: 100%;
  float: left;
  width: 25%;
}

.infocontent {
  text-align: center;
  color: #fff;
  width: 50%;
  float: left;
}

div#facebook.infocontentheader {
  background-color: #3c5999;
}

div#facebook.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

p#sTitle {
  font-weight: 900;
  font-size: 1.5vw;
}

p#bTitle {
  //font-weight: 900;
  font-size: 1.2vw;
}

p#facebook_spend,
p#youtube_spend,
p#search_spend,
p#programmatic_spend,
p#instagram_spend,
p#twitter_spend {
  font-weight: 900;
  font-size: 1.3em;
  margin: 10px 0 0 20px;
}

p#facebook_budget,
p#youtube_budget,
p#search_budget,
p#programmatic_budget,
p#instagram_budget,
p#twitter_budget {
  font-size: 1.2em;
  margin: 10px 0 0 20px;
}

div#twitter.infocontentheader {
  background-color: #1da1f2;
}

div#twitter.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

div#programmatic.infocontentheader {
  background-color: #a15aa0;
}

div#display.parentbox {
  background-color: #b3b3b3;
  color: #fff;
}

div#video.parentbox {
  background-color: #999999;
  color: #fff;
}

div#mixed.parentbox {
  background-color: #c1c1c1;
  color: #fff;
}

#programmatic div.infocontentheader {
  color: #fff;
}

div#programmatic.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

div#programmatic_value.infocontent {
  color: #000;
}

div#youtube.infocontentheader {
  background-color: #ff0102;
}

div#youtube.infobox img {
  display: block;
  margin: 0 auto 0 auto;
}

div#search.infocontentheader {
  background-color: #cac9c2;
}

div#search.infobox img {
  display: block;
  margin: 10% auto 0 auto;
}

div#instagram.infobox {
  background-color: #fff;
}

div#instagram.infobox img {
  display: block;
  margin: 10% auto 0 auto;
}

.hidden {
  display: none;
}

#parent_div_1 {
  width: 50%;
  min-height: 150px;
  background-color: #757476;
  margin-right: 0px;
  float: left;
}

#parent_div_2 {
  width: 50%;
  min-height: 150px;
  background-color: #8D8D8D;
  margin-right: 0px;
  float: left;
}

.parentbox {
  width: 33.33%;
  min-height: 150px;
  /*background-color: #8D8D8D;*/
  margin-right: 0px;
  float: left;
}

.parentbox1 {
  width: 100%;
  min-height: 150px;
  margin-right: 0px;
  float: left;
}

.parentbox2 {
  width: 50%;
  min-height: 150px;
  margin-right: 0px;
  float: left;
}

.parentbox3 {
  width: 33.33%;
  min-height: 150px;
  margin-right: 0px;
  float: left;
}

.child_div_1 {
  margin-top: 50px;
  margin-left: 15%;
  margin-bottom: 0px;
  text-align: left;
}

.child_div_2 {
  margin-left: 15%;
  margin-top: 10px;
  margin-bottom: 40px;
  text-align: left;
}

.child_budget {
  margin-top: 10px;
  margin-bottom: 40px;
  padding-left: 15%;
  text-align: left;
  float: left;
}

.child_spend {
  margin-top: 10px;
  margin-bottom: 40px;
  padding-right: 15%;
  text-align: left;
  float: right;
}

.child_title {
  margin-top: 50px;
  margin-bottom: 0px;
  text-align: center;
}

.child_budget_number {
  padding-right: 20%;
}

.child_spend_number {
  padding-left: 20%;
}

.boxbox {
  display: table;
  width: 99.8%;
  height: 160px;
  font-size: 1.1vw;
}

.boxbox {
  float: left;
  display: table;
  width: 99.8%;
  height: 180px;
}

.boxbox>.col-lg-6 {
  display: table-cell;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div id="wrapper2" style="height:160px;">
<div class="infobox infobox5" id="platform1">
<div class="boxbox">
  <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform1_value1">353</div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform1_value2">1,634</div>
      </div>
    </div>
  </div>
</div>
</div> 
<div class="infobox hidden" id="platform6">
<div class="boxbox" style="color: rgb(255, 255, 255);">
  <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform6_value1"></div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform6_value2"></div>
      </div>
    </div>
  </div>
</div>
</div> 
<div class="infobox infobox5" id="platform5">
<div class="boxbox" >
  <div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform5_value1">706</div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform5_value2"></div>
      </div>
    </div>
  </div>
</div>
</div> 
<div class="infobox infobox5" id="platform3">
<div class="boxbox" id="platform3" >
  <div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform3_value1">404</div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform3_value2"></div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="infobox infobox5" id="platform4">
<div class="boxbox">
  <div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform4_value1">353</div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform4_value2"></div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="infobox infobox5" id="platform2">
<div class="boxbox" id="platform2" >
  <div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
    <img src="">
  </div>
  <div class="col-lg-6" style="float: left;">
    <div class="container">
      <div id="sTitle">value1<br>
        <div id="platform2_value1">404</div>
      </div>
      <div id="bTitle">value2<br>
        <div id="platform2_value2">6,364</div>
      </div>
    </div>
  </div>
</div>
</div> 
</div>