区分不同的.CSS？

我的问题是，我的代码中有以下结构“form”的.CSS：

但我希望我的按钮有所不同（我不希望有宽度的边框）：

但是，该结构的.CSS也应用于该按钮。我想区分它，但我不知道如何区分。我试过几种方法，包括：

form, .button {
    display: block;
    margin: auto;
    border: none;
    color: black;
    padding: 8px 40px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
}

你能帮我吗？ 多谢各位

按钮的图像如下所示：

---

您需要知道css中元素的权重

• 元素（范围、输入、形式…）=1
• 班级（.my class）=10
• id（#我的id）=100
• 属性（style=“color:red”）=1000

表单、.button{

-表单和按钮的样式（单独）

form.button{

-仅按钮样式（重量1+10=11）

form button.button{

在这里，您可以覆盖元素

的先前样式。button

（权重1+1+10=12）

---

在您的情况下，不是输入有边框，而是表单，您需要知道css中元素的权重

• 元素（范围、输入、形式…）=1
• 班级（.my class）=10
• id（#我的id）=100
• 属性（style=“color:red”）=1000

表单、.button{

-表单和按钮的样式（单独）

form.button{

-仅按钮样式（重量1+10=11）

form button.button{

在这里，您可以覆盖元素

的先前样式。button

（权重1+1+10=12）

---

---

在您的情况下，不是输入有边框，而是表单

您想要此

表单。按钮

？我不希望按钮具有“表单”样式然后你可能需要学习更多关于CSS选择器的知识以及它们的工作原理……因为你不会有表单的样式，但是它可以工作，我只是不希望按钮周围有边框

表单。按钮
不应用
表单的样式
，它是一个CSS选择器，在
表单中声明一个
。按钮
ode>（其优先级高于之前定义的
.button
，从而覆盖任何
.button
样式）。我至少要尝试@TemaniAfif的建议。或者将
style=“border:none”
添加到您的按钮中。您想要此
表单。button
？我不想要按钮具有“表单”样式然后你可能需要学习更多关于CSS选择器的知识以及它们的工作原理……因为你不会有表单的样式，但是它可以工作，我只是不希望按钮周围有边框
表单。按钮
不应用
表单的样式
，它是一个CSS选择器，在
表单中声明一个
。按钮
ode>（其优先级高于仅
.button
，因此覆盖了先前定义的任何
.button
样式）。我至少要尝试@TemaniAfif的建议。或者将
style=“border:none”
添加到您的按钮。我已经尝试了
style=“border:none”
但是边框仍然存在。它没有被消除。@galep非常糟糕的解决方案，但它可以帮助您：
边框：无！重要；
好的，我用
按钮试过了{显示：块；边距：自动；背景色：#e7e7e7；/*灰色*/边框：无；颜色：黑色；填充：8px 40px；文本对齐：居中；文本装饰：无；字体大小：16px；光标：指针；边框：无！重要；}
但边界仍然存在there@galep但是你写了两次边框。第一次边框：无，第二次：重要。你需要先删除。即使我删除了它，边框仍然存在…我试图删除按钮的边框。但是因为它有“表单”结构，所以它显示为“表单，.content”的边框我尝试过使用
style=“border:none”
但边框仍然存在。它不会消失。@galep非常糟糕的解决方案，但它可以帮助您：
border:none！重要；
好的，我尝试了
按钮{显示：块；边距：自动；背景色：#e7e7e7；/*灰色*/边框：无；颜色：黑色；填充：8px 40px；文本对齐：居中；文本装饰：无；字体大小：16px；光标：指针；边框：无！重要；}
但边界仍然存在there@galep但是你写了两次边框。第一次边框：无，第二次：重要。你需要先删除。即使我删除了它，边框仍然存在…我试图删除按钮的边框。但是因为它有“表单”结构，所以它显示为“表单，.content”的边框
<form action="#" method="post">
    <input type="hidden" id="hiddenfield" name="hiddenfield">
    <button class="button" name="search">Search</button>
</form>

.button {
    display: block;
    margin: auto; 
    border: none;
    color: black;
    padding: 8px 40px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background:#333333;
    color: white;
}

form, .button {
    display: block;
    margin: auto;
    border: none;
    color: black;
    padding: 8px 40px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
}

form {
  border: none !important;
}