输入的 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

这个确实有效。

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"] 包含 descendant combinators 所以它们不会匹配，因为左侧匹配输入，然后右侧不匹配，因为输入不能有后代。

Answer 2

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

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

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

为此选择input 元素，其type 是submit 和，其class 包含wysija-submit 和wysija-submit-field，您需要从以下位置更改选择器：

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

收件人：

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