我是制作网站的新手，因此找到了一个模板用作我自己的个人网站的参考，到目前为止，我正在使用试图删除边框的按钮，因此它是一个文本按钮而不是 3D 按钮。我已经用 HTML 编写了按钮，并尝试在单独的 CSS 文件中编辑它们。我尝试使用 Flex 容器来帮助组织这些特定的按钮，因此如果我将来使用按钮，CSS 代码不会与网站上的所有按钮交互。
问题是，无论我使用什么 CSS 选择器，它们实际上并不与容器内的按钮交互，而是似乎只与容器本身交互，这让我慢慢感到困惑。我已经使用了类选择器和 ID 选择器，我不想使用元素选择器，因为它会与我添加到网站的每个按钮交互。
我查看了选择器优先级，看看我是否遗漏了某些内容，但我不认为这是我正在处理的问题，但希望在您的帮助下，我可以找出我遗漏的拼图。
HTML 代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="App.css"
<meta charset="UTF-8" />
<title>Scarlets Website</title>
</head>
<body>
<h1>
Welcome to Scarlets Website!
</h1>
<div class = Selectors>
<button> Resume </button>
<button> My work </button>
<button> Socials </button>
</div>
</body>
</html>
CSS 代码
h1 {
color: white;
font-size: 20px;
position: fixed;
left: 100px;
bottom: 830px;
}
body {
background-color: black
}
.Selectors {
border: none;
size: 100px;
position: fixed;
left: 50%;
background-color: black;
color: white;
}
使用这段代码，我希望与整个按钮进行交互，因此每个按钮都在选择器内一起编辑，但它只会影响 Flex 容器，并且迷失了如何单独与它们交互或与所有三个按钮交互容器内。任何帮助将不胜感激，谢谢！
您应该直接使用更具体的按钮选择器，而不是使用
.Selectors.Selectors button {
border: none;
padding: 10px;
margin: 5px;
background-color: black;
color: white;
}
你说的
size: 100px;如果您尝试设置按钮的大小，则应使用
widthheight