46

根据 W3 CSS 规范，类似：input[type~="text password"]应该选择类型设置为“文本”或“密码”的输入字段，但它不起作用！我误解了这条线吗？

E[foo~="warning"] 匹配任何“foo”属性值为空格分隔值列表的 E 元素，其中一个值正好等于“warning”。

CSS 规范源，它是表格中倒数第四个。

4

4 回答 4

69

是的，你搞错了。选择器是在空格分隔的列表中搜索..即

<element attribute="text password" />

你可以找到使用：

element[attribute~="text"]

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

<element attribute="textual password" />

希望有帮助吗？

要实现您实际尝试做的事情会更加冗长：

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

于 2012-06-29T10:35:48.793 回答
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;
}

我希望你能理解。

于 2019-01-12T07:39:20.677 回答
1

你读错了。E[foo~="warning"]将选择任何警告它的元素以空格分隔的列表。像这样：<el foo="test warning etc" />

于 2012-06-29T10:37:19.263 回答
0

我试过input{property: ....}了，它奏效了。

例如 input{border: 3px solid red;}

于 2020-02-19T00:01:07.430 回答