在每个父级DIV中更改第n个孩子的背景颜色

Question

我有如下所示的HTML。 使用CSS，我想更改每个div的nth child div的背景颜色。 如果单击第一个“ 更多信息”按钮，则要更改每个div的第一个子div的颜色，依此类推。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> HTML : <div class="row" id="empListTable"> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold"> Hired </div> <div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold"> Screened </div> <div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold"> Pre-Qualified </div> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold"> Approved </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold"> 10 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold"> 10 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold"> 6 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold"> 2 </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-sm-3" style="font-size:12px;color:#888;"> Total Number of <br /> Employees hired </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Employees screened <br /> via phone or web </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Via Screened <br />employees </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Employees have <br />recieved tax credits </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-sm-3" style="font-size:8px"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> </div> 

Answer 1

因此，首先，您可以使用index方法获得单击按钮的索引，然后可以使用nth-child选择器更改背景颜色。

以全屏模式查看解决方案以查看发生了什么

 var index = 1; $(".button-container button").on('click', function(){ // this will tell you which index you clicked $('.to-change div:nth-child('+index+')').css('background-color', 'white'); index = $(this).index('button') + 1; $('.to-change div:nth-child('+index+')').css('background-color', 'red'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row" id="empListTable"> <div class="form-group to-change col-md-12" style="padding-left: 35px;"> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold"> Hired </div> <div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold"> Screened </div> <div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold"> Pre-Qualified </div> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold"> Approved </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold"> 10 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold"> 10 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold"> 6 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold"> 2 </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-sm-3" style="font-size:12px;color:#888;"> Total Number of <br /> Employees hired </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Employees screened <br /> via phone or web </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Via Screened <br />employees </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Employees have <br />recieved tax credits </div> </div> <div class="form-group col-md-12 button-container" style="padding-left: 35px;"> <div class="col-sm-3" style="font-size:8px"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button> </div> </div> 

Answer 2

由于您正在使用AngularJS，因此可以添加ng-style并修改ng-click以更改要更改的div 。 要在单击更多信息按钮时更改引导程序行相应列中数字的背景，请执行以下操作：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div class="row" id="empListTable" ng-app=""> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold"> Hired </div> <div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold"> Screened </div> <div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold"> Pre-Qualified </div> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold"> Approved </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col0"> 10 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col1"> 10 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col2"> 6 </div> <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col3"> 2 </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-sm-3" style="font-size:12px;color:#888;"> Total Number of <br /> Employees hired </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Employees screened <br /> via phone or web </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Via Screened <br />employees </div> <div class="col-sm-3" style="font-size:12px;color:#888"> Employees have <br />recieved tax credits </div> </div> <div class="form-group col-md-12" style="padding-left: 35px;"> <div class="col-sm-3" style="font-size:8px"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col0={'background-color':'red'}">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col1={'background-color':'blue'}">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col2={'background-color':'green'}">More Info <i class="fa fa-arrow-down"></i></button> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col3={'background-color':'yellow'}">More Info <i class="fa fa-arrow-down"></i></button> </div> </div> 

有关更多示例，请转到Angular ng样式 。

Answer 3

您可以使用CSS3 nth-child()选择器。

.parent > div:nth-child(1)
{
    background-color: blue;
}

有关更多参考，请转到此处 。

 div { height: 50px; background: gray; } .parent > div:nth-child(1) { background: blue; } 

 <div class="parent"> <div>div 1</div> <div>div 2</div> <div>div 3</div> <div>div 4</div> </div> 

Answer 4

如果要执行第nth个子项并确保其唯一的divs请使用此选择器：

div:nth-of-type(2) {
    background-color: red;
}

 div { min-height: 200px; } div > div { background-color: blue; } div > div:nth-of-type(2) { background-color: red; } 

 <div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> </div>