我试图只在主容器的第一个子级上应用样式。结构看起来像这样。
.container {
display: flex;
}
.container.main {
border: 1px solid gray;
}
.container.main .item>* {
border-color: red;
}
.item {
width: 30px;
height: 30px;
border: 1px solid blue;
margin: 1px 1px 2px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container main">
<div class="container">
<div class="item"></div>
<div class="container">
<div class="item">
</div>
<div class="container">
<div class="container">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</body>
</html>我希望第一个孩子是黄色的，最后一个孩子是点状的。我该怎么做？正如您所看到的，每个孩子都可能在不同的容器中处于某种深度。
由于级别不同，只有CSS是无法做到这一点的。然而，使用CSS和javascript的组合：
.item.first { /* some style */ }
.item.last { /* some other style */ }
const root = document.querySelector('.container.main');
const items = root.querySelectorAll('.item');
items[0].classList.add('first');
items[items.length-1].classList.add('last');