什么是 CSS 属性选择器？
CSS 属性选择器是通过选择元素的特定属性选择相应的元素，它可以减少 HTML 标签数量，也可以为局部 CSS 样式提供更好的控制。
在表单样式中，我们可以使用属性选择器来选择特定的表单元素进行样式设置。
常用的 CSS 属性选择器
属性选择器的基本语法
属性选择器使用方括号([])把属性名括起来，如果需要指定属性的值，则在属性名后跟着等号和需要匹配的值。例如：
[attribute]
[attribute=value]
属性选择器可以匹配元素的属性，例如，以下是匹配 type 属性值为 text 的 input 元素样式：
input[type=text]{
/* 样式设置 */
}
根据属性名来选择元素
我们可以根据元素的某个属性名来选择特定的元素，无需考虑属性值是什么。例如，以下是匹配所有 title 属性的元素样式：
[title] {
/* 样式设置 */
}
根据属性值来选择元素
我们可以根据元素的属性值来选择特定的元素。例如，以下是匹配 id 属性值为 "header" 的元素样式：
[id=header] {
/* 样式设置 */
}
选择包含特定属性值的元素
我们可以选择包含特定属性值的元素。例如，以下是匹配 href 属性中包含 "https" 的 a 元素样式：
a[href*="https"] {
/* 样式设置 */
}
其中，符号 "*" 表示包含的意思。
选择以特定属性值开头的元素
我们可以选择以特定属性值开头的元素。例如，以下是匹配 src 属性以 "https" 开头的 img 元素样式：
img[src^="https"] {
/* 样式设置 */
}
其中，符号 "^" 表示以什么开头的意思。
选择以特定属性值结尾的元素
我们可以选择以特定属性值结尾的元素。例如，以下是匹配 href 属性以 ".pdf" 结尾的 a 元素样式：
a[href$=".pdf"] {
/* 样式设置 */
}
其中，符号 "$" 表示以什么结尾的意思。
如何使用 CSS 属性选择器设置表单样式
使用 CSS 属性选择器来设置表单样式可以提高表单的可读性和可维护性，以下是几种常见的表单样式设置方法。
设置输入框样式
为了提高输入框的可读性，我们可以设置输入框的样式。
input[type=text], input[type=password] {
/* 设置输入框样式 */
border: 1px solid #ccc;
padding: 8px;
border-radius: 5px;
}
在上述代码中，我们使用了属性选择器来选择 type 属性值为 text 和 password 的 input 元素，并设置它们的边框、填充和圆角。
设置下拉列表样式
下拉列表是表单中常用的元素，我们可以使用属性选择器来设置下拉列表的样式。
select {
/* 设置下拉列表样式 */
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
}
在上述代码中，我们使用了选择器来选择 select 元素，并设置它的边框、填充和圆角。
设置单选框和复选框样式
我们可以使用属性选择器来设置单选框和复选框的样式，例如：
input[type=checkbox], input[type=radio] {
/* 设置复选框和单选框样式 */
margin: 10px;
width: 20px;
height: 20px;
}
在上述代码中，我们使用属性选择器来选择 type 属性值为 checkbox 和 radio 的 input 元素，并设置它们的外边距、宽度和高度。
设置提交按钮样式
提交按钮是表单中常用的元素，我们可以使用属性选择器来设置提交按钮的样式。
input[type=submit] {
/* 设置提交按钮样式 */
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
}
在上述代码中，我们使用属性选择器来选择 type 属性值为 submit 的 input 元素，并设置它的背景颜色、字体颜色、字体大小、填充、外边距、边框、圆角和光标类型。
总结
使用 CSS 属性选择器可以为表单提供更好的样式控制，从而提高表单的可读性和可维护性。在设置表单样式时，我们可以根据不同的表单元素使用不同的属性选择器来选择特定的元素，并设置其样式。