用于输入的CSS [type =“submit”]

在我开始哭泣之前，有人能解释一下为什么没有一个尝试CSS样式化提交按钮有什么作用？我已经走了font-size: 50px，使之明显，如果我打右元素，我还没：用于输入的CSS [type =“submit”]

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">

来源

2016-11-10 Robin

第一个工作。另外两个是没有意义的（空间意味着你将目标放在班级内部的按钮**上，而不是你的班级应用于按钮）。你的浏览器是什么？ –

看到[在这个小提琴]（https://jsfiddle.net/6t9bkdkk/），第一个工程。 – lampshade

这一个确实工作。

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所以他们不会匹配，因为左手侧的输入匹配，则右侧匹配任何操作，因为输入不能繁衍后代。

来源

2016-11-10 10:59:18 Quentin

作为一个侧面说明，这似乎不工作的原因是在Chrome上缓存。我做了一个硬页面重新加载，它的工作。 – Robin

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

你目前选择做的是试图用含有.wysija-submit.wysija-submit-field一个class属性选择的任何元素，那么它试图找到一个input元素，其type是提交内该元素。这将在下面的标记工作：

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

为了得到这个选择input元素，其type是提交和其class包含wysija提交和wysija提交场，你你要用你的选择从改变：

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

要：

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

来源

2016-11-10 10:57:58

非常感谢！你能解释一下这背后的逻辑吗？ – Robin

@Robin我已经更新了我的答案。希望这可以解决问题。 –

@Robin在侧面说明上我写了一个小型Web应用程序，它试图揭示CSS选择器在做什么。这可以在https://selectors.io找到。粘贴你的选择器会告诉你CSS编译器正在试图用它来做什么。 –

用于输入的CSS [type =“submit”]

回答

相关问题