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中的空格字符是Descendant Combinator。它告诉CSS编译器选择前一个选择器的任何后代。

您当前的选择器正在尝试选择class属性包含.wysija-submit.wysija-submit-field的任何元素，然后它尝试查找input元素{{1} 提交那个元素。这适用于以下标记：

type

要使其选择<elem class="wysija-submit wysija-submit-field"> <input type="submit" /> </elem> 提交的input元素，其type包含 wysija-提交和 wysija-submit-field ，您需要更改选择器：

class

要：

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

输入的CSS [type =“submit”]

2 个答案: