为什么我的多个 CSS 属性选择器不起作用？ [复制]答案

【问题标题】：Why aren't my multiple CSS attribute selectors working? [duplicate]为什么我的多个 CSS 属性选择器不起作用？ [复制]
【发布时间】：2021-01-08 01:07:09
【问题描述】：

我有两个表单，一个包含用于输入用户名的表单域，另一个包含用户输入电子邮件地址的页面：

<!-- user.html -->
<form action="/account/login/" method="post">
  <div class="form-group mt-3">
    <input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" placeholder="Username" class="form-control form-control-md" required id="id_username">
  </div>
  <p class="mt-4"><input type="submit" class="btn btn-block btn-primary" value="Login"></p>
</form>


<!-- email.html -->
<form action="." method="post">
  <div class="form-group">
    <input type="email" name="email" autocomplete="email" maxlength="254" placeholder="Email" class="form-control form-control-md" required id="id_email">
  </div>
  <input type="submit" value="Send Email" class="btn btn-primary btn-block">
</form>

我正在尝试使用像这样的多个属性选择器来设置两个输入控件的样式，但它不起作用。样式未应用。

// styles.scss
form input[type=text][type=email] {
    background-color: #f0f0f0;
}

但是，如果我像这样将类型分成两个单独的规则，样式确实会得到正确应用。

form input[type=text] {
    background-color: #f0f0f0;
}

form input[type=email] {
    background-color: #f0f0f0;
}

CSS documentation 说这应该可行。我做错了什么？

【问题讨论】：

标签： css

【解决方案1】：

根据文档，当type=email AND type=text 这不可能是真的。

这里，选择器匹配所有具有“hello”属性的 SPAN 元素恰好具有值“Cleveland”和，其“goodbye”属性具有正是“哥伦布”的价值：

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

您需要同时包含这两个版本；

form input[type=text],
form input[type=email] {
    background-color: #f0f0f0;
}

【讨论】：

【解决方案2】：

输入文字类型后加逗号。

【讨论】：