CSS多输入[类型]选择器

Question

根据W3 ​​CSS规范,类似于:input[type~="text password"]应该选择类型设置为"text"或"password"的输入字段,但它不起作用!我误解了这条线吗？

E [foo~ ="warning"]匹配任何E元素,其"foo"属性值是空格分隔值列表,其中一个值与"warning"完全相同.

CSS规范来源,它是表格底部的第四个.

Answer 1

是的,你已经绕错了路.选择器是在空格分隔列表中搜索..即

<element attribute="text password" />

你可以找到使用:

element[attribute~="text"]

这样做的好处是它不应该匹配:

<element attribute="textual password" />

希望有帮助吗？

要实现你真正想要做的是更冗长:

input[type="text"], input[type="password"]

Answer 2

只需按照以下步骤操作即可：

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：

.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;
}

我希望你能理解。