Question

我正在尝试在引导程序4中设置card-body的背景颜色，但是我不确定如何获得card-body元素，因为每个主体都有不同的父对象（我想我对此的理解是正确的），是否可以使用下面的代码来做到这一点？

我在下面放了一个示例代码段，其中显示了段落的工作原理，但是这些卡片在这里无效：

.bg-alt:nth-child(5n+1){background-color: #5bc0de;}
.bg-alt:nth-child(5n+2){background-color: #ed9c28;}

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>

<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin ">
	<div class="card">
		<div class="bg-alt">
		98787667f
		</div>		
	</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
	<div class="card">
		<div class="bg-alt">
			45645656u57u5
		</div>		
	</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
	<div class="card">
		<div class="bg-alt">
			456456456456
		</div>		
	</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
	<div class="card">
		<div class="bg-alt">
			123123123
		</div>		
	</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
	<div class="card">
		<div class="bg-alt">
	123123
		</div>		
	</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
	<div class="card">
		<div class="bg-alt">
324234234
			</div>
		</div>		
	</div>
</div>
</body>
</html>

Answer 1

“卡体”始终是唯一的子代（绝不是第五个子代），因为“第n个子代”选择器仅引用直系兄弟姐妹。试试：

.col-xl-2:nth-child(5n+1) .bg-alt {background-color: #5bc0de;}
.col-xl-2:nth-child(5n+2) .bg-alt {background-color: #ed9c28;}

如何获得Bootstrap .card正文的第n个子元素

1 个答案: