CSS选择器无法作用于容器内HTML按钮的问题求助

问题核心 #

你当前的CSS只对.Selectors容器本身生效，没有选中容器内的<button>元素，所以按钮样式没变化。要批量修改容器内的按钮，需要使用后代选择器定位容器里的所有按钮；如果要单独修改某个按钮，可以给按钮添加独立类名。

方案1：批量修改容器内所有按钮 #

修改CSS，新增针对容器内按钮的选择器，同时重置按钮默认样式，让它变成纯文本按钮：

h1 {
    color: white;
    font-size: 20px;
    position: fixed;
    left: 100px;
    bottom: 830px;
}

body {
    background-color: black;
}

.Selectors {
    position: fixed;
    left: 50%;
    background-color: black;
    /* 移除容器的border、size属性，这些是按钮需要的样式，不是容器的 */
}

/* 选中.Selectors容器内的所有按钮 */
.Selectors button {
    border: none;
    background-color: transparent; /* 透明背景，模拟文本按钮 */
    color: white;
    font-size: 16px;
    padding: 8px 16px; /* 可选：调整点击区域大小，提升交互体验 */
    cursor: pointer; /* 鼠标悬停显示手型 */
}

/* 可选：添加hover效果增强交互 */
.Selectors button:hover {
    color: #ccc;
}

同时修正HTML里的链接标签错误（缺少闭合>）：

<link rel="stylesheet" href="App.css">

方案2：单独修改某个按钮 #

如果需要单独调整某个按钮的样式，给目标按钮添加专属类名：

<div class="Selectors"> 
    <button class="btn-resume"> Resume </button>
    <button class="btn-work"> My work </button>
    <button class="btn-socials"> Socials </button>
</div>

然后在CSS里针对每个类写样式：

.btn-resume {
    border: none;
    background-color: transparent;
    color: white;
    font-weight: bold; /* 让这个按钮加粗区分 */
    cursor: pointer;
}

.btn-work {
    border: none;
    background-color: transparent;
    color: #4CAF50; /* 用绿色文本区分 */
    cursor: pointer;
}

/* 其他按钮可按需求设置不同样式 */

关键说明 #

• 后代选择器.Selectors button只会影响这个容器内的按钮，不会干扰后续添加的其他按钮，符合你的需求。
• 按钮默认带有浏览器自带样式（边框、背景、内边距等），必须设置border: none和background-color: transparent才能完全变成文本按钮。
• 添加cursor: pointer能明确提示用户这是可点击元素，提升交互体验。

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