css - div 中的样式表单元素

Question

我在 Wordpress 中使用联系表单，我在 div 中有表单。 div ID 是 contact_form_home。我正在尝试使用以下样式设置 div 的表单元素:

#contact_form_home input[type=text], input[type=email], textarea, input[type=submit] {
   background-color: #009fe3;
   border: 1px solid #fff;
   color: #fff;
   padding: 11px;
   line-height: 1;
   width: 100%;
}

出于某种原因，我网站上的任何其他文本区域也采用这种样式。如何仅为该 div 指定样式？

Answer 1

您需要为列表中的每个元素重复#contact_form_home。

#contact_form_home input[type=text], 
#contact_form_home input[type=email], 
#contact_form_home textarea, 
#contact_form_home input[type=submit] {
    ....
}

逗号 , 完全分隔元素，而不仅仅是第一个 id 的子元素。

您还应该看到每个电子邮件输入字段的每个提交按钮都有样式，但您可能没有任何其他此类元素。

为了更清楚，您的列表如下所示:

( #contact_form_home input[type=text] ) 
OR ( input[type=email] ) 
OR ( textarea ) 
OR ( input[type=submit] )