输入的CSS [type =“ 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

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

您当前的选择器正在做的是尝试选择具有class包含 属性的任何元素.wysija-submit.wysija-submit-field，然后尝试查找在该元素内提交的input元素。这适用于以下标记：type

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

要让它选择提交且包含wysija-submit和wysija-submit-field 的元素input，您需要更改选择器：type class

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

到：

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

Answer 2

这确实有效。

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"]包含后代组合符，因此它们将不匹配，因为左侧与输入匹配，然后右侧不与任何东西匹配，因为输入不能具有后代。