Question

我的问题是我的代码中有以下.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;
}

你能帮我吗？谢谢

按钮的图像在这里： enter image description here

Answer 1

您需要了解CSS中元素的权重

元素（范围，输入，表格...）= 1
class（.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;
}

在您的情况下，输入内容没有边框，但表格

不同的.CSS之间有区别吗？

1 个答案: