Как я могу получить n-го ребенка тела Bootstrap .card - PullRequest
1 голос
/ 20 сентября 2019

Я пытаюсь установить цвет фона для тела карты в начальной загрузке 4, однако я не уверен, как получить элемент карты-тела, поскольку у каждого тела есть свой родительский элемент (я думаю, что мое понимание этогоправильно), возможно ли сделать это, используя приведенный ниже код?

Я поместил образец кода ниже, который показывает работающие абзацы, но карты здесь не работают:

.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>

1 Ответ

3 голосов
/ 20 сентября 2019

«Карточное тело» всегда является ЕДИНСТВЕННЫМ дочерним (никогда не пятым), поскольку селектор «nth-дочерний» ссылается только на непосредственных братьев и сестер.Попробуйте:

.col-xl-2:nth-child(5n+1) .bg-alt {background-color: #5bc0de;}
.col-xl-2:nth-child(5n+2) .bg-alt {background-color: #ed9c28;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...