按表单名称定位 CSS

在 HTML 表单中，每个表单元素都有一个唯一的名称，这个名称可以用于定位和样式化表单元素。在 CSS 中，我们可以使用属性选择器来根据表单名称选择元素并添加样式。

语法

input[name="name"] {
  /* 样式 */
}

上面的语法中，input 表示我们要选择的元素类型，name 是属性名称，"name" 是属性值，两者用等号连接。这句 CSS 代码的作用是选择所有名称为 "name" 的 <input> 元素，并为其添加样式。

示例

假设我们有如下 HTML 表单：

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name">
  <label for="email">Email:</label>
  <input type="email" name="email" id="email">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
</form>

想让表单中的所有输入框的背景色为灰色，可以使用以下 CSS 代码：

input {
  background-color: gray;
}

如果只想让名称为 "name" 的输入框的背景颜色为蓝色，可以使用以下 CSS 代码：

input[name="name"] {
  background-color: blue;
}

总结

按表单名称定位 CSS 是 Web 开发中常用的技巧，可以帮助我们更加灵活地控制表单元素的样式。属性选择器是 CSS 中一个强大的特性，可以根据元素的属性来选择元素并为其添加样式。