为何无法通过类选择器为HTML按钮设置33%宽度实现三等分布局？

你写的失效选择器button.numbers存在语义匹配偏差：
这个选择器的实际匹配目标是 本身为<button>标签、且自身携带class="numbers"属性的元素，只有碰到类似<button class="numbers">按钮</button>这类同时满足两个条件的标签时才会命中。
对照你的HTML结构：numbers类是挂载在父级<section>标签上的，三个<button>本身并没有带numbers类，所以这个选择器根本匹配不到任何页面元素，写入的宽度样式自然完全不会生效。

之前直接写全局button { width: 33% }能生效，是因为这个选择器不限制元素位置，会命中页面上所有的按钮标签，自然能匹配到.numbers组里的三个按钮。但这种写法是全局生效的，如果页面其他位置也存在button标签，也会被同样设置宽度，不符合「仅给numbers分组下的按钮设置样式」的预期。

正确的实现写法 #

如果要给.numbers分组下的所有按钮设置33%宽度，需要将选择器调整为后代匹配逻辑：

/* 选中所有处于.numbers分组内部的button标签 */
.numbers button {
    width: 33%;
    /* 可选配置：让宽度计算包含边框和内边距，避免三个按钮总宽度溢出导致换行 */
    box-sizing: border-box;
}

CSS选择器易混点提醒
选择器之间有没有空格，语义会完全不同，很容易写错：

• 无空格的标签.类名写法：要求元素本身同时满足「是对应标签、带对应类」两个条件
• 有空格的.父类 标签写法：要求目标标签是处于带对应类的父元素内部的后代元素
• 千万不要把父元素的类名和子元素的标签直接无空格拼接，否则永远匹配不到目标元素

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