区分不同的.CSS？答案

【问题标题】：Differenciate between different .CSS?区分不同的.CSS？
【发布时间】：2018-08-01 10:37:40
【问题描述】：

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

form, .content {
    font-family: Arial, Helvetica, sans-serif; /*Not yet a member? Sign up*/
    width: 30%;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #595959; /*Border register*/
    background: white;
    /*border-radius: 0px 0px 10px 10px;*/
}

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

<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;
}

但是，结构的 .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;
}

你能帮帮我吗？谢谢

按钮的图片在这里：

【问题讨论】：

你想要这个form .button 吗？
我不希望按钮具有“表单”的样式
那么你可能需要了解更多关于 CSS 选择器以及它们如何工作的知识......因为你不会拥有这样的表单样式
但是它可以工作，我只是不希望按钮周围有边框
form .button 不应用 form 的样式，它是一个 CSS 选择器，在 form 内声明 .button（其优先级高于仅 .button，因此覆盖任何.button 之前定义的样式）。我至少会尝试@TemaniAfif 的建议。或将style="border:none" 添加到您的按钮。

标签： css forms button

【解决方案1】：

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

元素（跨度、输入、表单...）= 1
类 (.my-class) = 10
id (#my-id) = 100
属性 (style="color:red") = 1000

form, .button { - 表单和按钮的样式（分开）

form .button { - 仅按钮样式（权重 1 + 10 = 11）

form button.button { 在这里您可以覆盖元素 .button 的先前样式（权重 1 + 1 + 10 = 12）

form {
  border: none !important;
}

在您的情况下，输入没有边框，但表单

【讨论】：

我试过style="border:none"，但边界仍然存在。它不会消失。
@galep 非常糟糕的解决方案，但它可以帮助你：border: none !important;
好吧，我试过.button { display: block; margin: auto; background-color: #e7e7e7; /* Grey */ border: none; color: black; padding: 8px 40px; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; border: none !important; }，但边界还在
@galep 但你写了两次边框。第一次边界：无，第二次：重要。您需要先删除。
即使我删除它，边框仍然存在...我试图删除按钮的边框。但是因为里面有结构“form”，所以出现了“form,.content”的边框