无法设置提交按钮的样式

Question

我似乎无法弄清楚为什么我无法设置提交按钮的样式。

代码段示范：

#contact_form {
  max-width: 400px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid black;
  text-align:center;
  background: #e6e6e6;
}

#contact_form h2 {
  background: #00AF83;
  color: #fff; 
}

#contact_form [type="text"], [type="email"], [name="message"], [type="submit"]{
  width: 100%;
  outline: none;
  background: #fff; 
  margin-bottom: 10px;  
}

#contact_form input [type="text"]:focus, [type="email"]:focus, [name="message"]:focus, [type="submit"]:focus {
  box-shadow: 0 0 5px #43d1af;
  border: 1px solid #43D1AF;  
}

/* Can't stye this for some reson */
#contact_form input [type="submit"]{
  background: #00AF83;
  border: 1px solid red;   
  color: #fff;
  padding: 10px 0; 
}

<div>
   <div id="contact_form">
     <h2> Get in Touch </h2> 
     <form>
       <input type="text" name="name" placeholder="Name" /> 
       <input type="email" name="email" placeholder="Email" />
       <textarea  name="message" placeholder="Message"></textarea>
       <input type="submit" name="send" placeholder="Send" />
     </form>
   </div>
 </div>

Answer 1

这是因为你的选择器错了。 input和[type="submit"]之间不应该有空格。对于空格，选择器会说＆＃34;选择嵌套在input下的任何内容，其中类型为＆＃39;提交＆＃39;＆＃34;，这不是您尝试的内容访问。

＆＃13;

＆＃13;

#contact_form input[type="submit"]{
  background: #00AF83;
  border: 1px solid red;   
  color: #fff;
  padding: 10px 0; 
}
#contact_form {
  max-width: 400px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid black;
  text-align:center;
  background: #e6e6e6;
}

#contact_form h2 {
  background: #00AF83;
  color: #fff; 
}

#contact_form [type="text"], [type="email"], [name="message"], [type="submit"]{
  width: 100%;
  outline: none;
  background: #fff; 
  margin-bottom: 10px;  
}

#contact_form input [type="text"]:focus, [type="email"]:focus, [name="message"]:focus, [type="submit"]:focus {
  box-shadow: 0 0 5px #43d1af;
  border: 1px solid #43D1AF;  
}

＆＃13;

<div>
   <div id="contact_form">
     <h2> Get in Touch  </h2> 
     <form>
       <input type="text" name="name" placeholder="Name" /> 
       <input type="email" name="email" placeholder="Email" />
       <textarea  name="message" placeholder="Message"></textarea>
       <input type="submit" name="send" placeholder="Send" />
     </form>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么不这样使用：

<input type="submit" name="send" class="myclass" placeholder="Send" />

CSS：

.myclass{
  background: #00AF83;
  border: 1px solid red;   
  color: #fff;
  padding: 10px 0; 
}