Поскольку div:nth-child(6) 1 также применяется к вашему элементу контейнера, поскольку это шестой ребенок, рассматривающий другие элементы внутри тела.
Сделайте ваш селектор более точным c и нацеливайте только на div внутри .container, чтобы избежать такой проблемы:
div {
height: 50px;
text-align: center;
font-weight: 600;
}
.container > div:nth-child(1) {
background-color: blueviolet;
}
.container > div:nth-child(2) {
background-color: coral;
}
.container > div:nth-child(3) {
background-color: darkgoldenrod;
}
.container > div:nth-child(4) {
background-color: darksalmon;
}
.container > div:nth-child(5) {
background-color: deeppink;
}
.container > div:nth-child(6) {
background-color: gold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox</title>
<link rel="stylesheet" href="./index.css" />
<style>
.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px 50px;
gap: 3px;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Обратите внимание, что он не будет вести себя одинаково везде. Здесь во фрагменте :nth-child(6) применяется, но с использованием другого инструмента может применяться другой селектор в зависимости от того, как сгенерированы элементы.
1 В ваших выходных данных nth-child(1) применяется, потому что вы вероятно, выполняется локальное тестирование, где код не изменится, и ваш контейнер останется первым дочерним элементом.
Related: Как выбрать первого или последнего дочернего элемента с CSS правильным?