CSS 多输入[类型] 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11260135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS multiple input[type] selectors
提问by Charles John Thompson III
According to the W3 CSS spec, something like: input[type~="text password"]should select input fields whose type is set to either "text" or "password", but it doesn't work! Did I misinterpret this line?
根据 W3 CSS 规范，类似于：input[type~="text password"]应该选择类型设置为“文本”或“密码”的输入字段，但它不起作用！我误解了这条线吗？
E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".
E[foo~="warning"] 匹配任何 E 元素，其“foo”属性值为空格分隔值列表，其中一个值与“warning”完全相等。
CSS spec source, it's the fourth from the bottom in the table.
CSS 规范源，它是表格底部的第四个。
回答by Pebbl
Yep, you've got it round the wrong way. The selector is to search withina space seperated list.. i.e.
是的，你搞错了。选择器是在一个空格分隔的列表中搜索.. 即
<element attribute="text password" />
<element attribute="text password" />
you could find using:
你可以找到使用：
element[attribute~="text"]
element[attribute~="text"]
The benefit of this is that it shouldn't match:
这样做的好处是它不应该匹配：
<element attribute="textual password" />
<element attribute="textual password" />
Hope that helps?
希望有帮助吗？
To achieve what you're actually trying to do is a bit more verbose:
要实现您实际尝试做的事情有点冗长：
input[type="text"], input[type="password"]
input[type="text"], input[type="password"]
回答by Johan
You are reading it wrong. E[foo~="warning"]will select any element that has warning it a space separated list. Like this: <el foo="test warning etc" />
你读错了。E[foo~="warning"]将选择任何带有空格分隔列表警告的元素。像这样：<el foo="test warning etc" />
回答by Md. Faysal Alam Riyad
Just follow this:
只要按照这个：
html:
html：
<div class="contact-form">
<label for="">Name</label>
<input type="text">
<label for="">Email</label>
<input type="email">
<label for="">Subject</label>
<input type="text">
<label for="">Message</label>
<textarea></textarea>
<input type="submit" value="Send">
</div>
css:
css：
.contact-form input[type="text"], input[type="email"]{
width:100%;
box-sizing:border-box;
border:1px solid black;
padding:5px;
}
.contact-form input[type="submit"]{
display:block;
color:black;
background-color:white;
border:1px solid black;
border-radius:10px;
margin-top:10px;
padding:10px;
cursor:pointer;
margin:auto;
margin-top:20px;
}
I hope you understand it.
我希望你明白。
回答by Soufen Ship
I tried input{property: ....}and it worked.
我试过了input{property: ....}，它奏效了。
For exampleinput{border: 3px solid red;}
例如input{border: 3px solid red;}
