如何选中指定class内的所有div？为何color-board下6个div仅显示1个

问题原因 #

你出现这个问题的核心是CSS选择器写法错误：

• 你写的div .color-board选择器中，空格代表后代选择规则，实际含义是「匹配所有作为div元素的后代、且类名为color-board的元素」，完全没有命中你需要的「color-board容器内的6个子div」。
• 这6个子div没有匹配到你写的宽、高、背景等样式，默认状态下高度为0，因此不可见。你看到的唯一显示的盒子，其实是外层的.color-board容器本身。

解决方法 #

将错误的子元素选择器修改为符合需求的写法即可，推荐两种写法：

• 后代选择写法，匹配color-board内所有层级的div：.color-board div
• 直接子元素选择写法，仅匹配color-board的一级子div，避免后续嵌套元素被误命中：.color-board > div

修正后的完整CSS示例：

.color-board{
    background-color: rgba(131, 131, 131, 0.4);
    padding: 5px;
    width: 100px;
    height: fit-content;
    /* 若需要子盒子横向排列可加以下两行代码 */
    /* display: flex;
    flex-wrap: wrap; */
}

/* 修改为正确的选择器即可 */
.color-board > div {
    width: 30px;
    height: 30px;
    border: 1px black solid;
    border-radius: 1em;
    background-color: white;
    margin: 2px; /* 可选，加上可以让子盒子之间有间距，避免挤在一起 */
}

内容的提问来源于stack exchange，提问作者Edberaga