用于输入的 CSS [类型= "submit"]

Question

在我开始哭泣之前，谁能解释一下为什么所有尝试的CSS样式化提交按钮都没有任何效果?我选择了font-size: 50px，让它更明显，如果我击中了正确的元素，我还没有:

 input[type="submit"].wysija-submit  {
        border-radius: 10px;
        border: none;
        box-shadow: none;
        font-family: inherit;
        font-size: 50px!important;
    }
    
    .wysija-submit input[type="submit"] {
        border-radius: 10px;
        border: none;
        box-shadow: none;
        font-family: inherit;
        font-size: 50px!important;
    }
    
    .wysija-submit.wysija-submit-field input[type="submit"] {
        border-radius: 10px;
        border: none;
        box-shadow: none;
        font-family: inherit;
        font-size: 50px!important;
    }

   <input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">
    
   

Answer 1

这一个, 。

input[type="submit"].wysija-submit  {
    border-radius: 10px;
    border: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 50px!important;
}

<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">

---

.wysija-submit input[type="submit"]和.wysija-submit.wysija-submit-field input[type="submit"]包含后代组合子，因此它们不会匹配，因为左侧匹配输入，然后右侧不匹配，因为输入不能有后代。

Answer 2

CSS中的空格字符是后代组合符。它告诉你的CSS编译器选择前一个选择器的任何后代。

您当前的选择器正在做的是试图选择包含.wysija-submit.wysija-submit-field的class属性的任何元素，然后它试图找到input元素，其type是提交在该元素。这将适用于以下标记:

<elem class="wysija-submit wysija-submit-field">
  <input type="submit" />
</elem>

要选择type为submit和且class包含wysija-submit和wysija-submit-field的input元素，您需要将选择器更改为:

.wysija-submit.wysija-submit-field input[type="submit"] { ... }

:

input[type="submit"].wysija-submit.wysija-submit-field { ... }