CSS多个输入元素[重复]答案

【问题标题】：CSS multiple input element [duplicate]CSS多个输入元素[重复]
【发布时间】：2021-04-07 16:44:18
【问题描述】：

我正在尝试 CSS，但我不知道为什么我的第二个 input 遵循 css 规则，即使我没有在课堂上声明。

.container2 input[type="text"],input[type="password"] {
  width: 80%;
  padding: 15px 22px;
  margin: 10px 5px;
  box-sizing: border-box; 
}

<div>
  <input type="text" placeholder="no container 1">
  <input type="password" placeholder="no container 2">
</div>

<div class="container2">
  <input type="text" placeholder="no container 3">
  <input type="password" placeholder="got container 4">
</div>

https://www.bitdegree.org/learn/best-code-editor/G3Dzq6Ct/1

【问题讨论】：

因为您在没有父选择器的情况下声明密码字段 css。需要这样添加：.container2 input[type="password"]

标签： html css css-selectors

【解决方案1】：

您的代码表示“.container2 中的文本输入和所有密码输入”。密码前也要加.container2。

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

在这种情况下，您可以使用更简单的选择器来获得相同的结果（只是在这种情况下，不是一般情况下）

.container2 input {...}

【讨论】：

【解决方案2】：

在 CSS 中；你在“，”之后开始一个新的声明。因此，您必须首先为两者添加 .container2 父级。

所以你应该使用

.container2 input[type="text"], .container2 input[type="password"]   {
    width: 80%;
    padding: 15px 22px;
    margin: 10px 5px;
    box-sizing: border-box; 
}

【讨论】：