使用CSS属性选择器input[type="text"]可精准设置文本输入框样式，如宽度、内边距、边框、圆角、字体等，并通过:focus添加聚焦效果；该选择器仅作用于type为text的输入框，避免影响email、password等其他类型，兼容性良好，推荐统一使用小写无空格的引号格式。
要针对特定属性的元素设置样式，比如只对 type="text" 的输入框自定义样式，可以使用CSS属性选择器。这种写法精准且简洁，避免影响其他类型的输入元素。
使用属性选择器[type="text"]
通过 input[type="text"] 可以选中所有文本输入框，然后为其添加自定义样式：
- 设置边框样式、圆角、内边距等外观属性
- 控制字体大小和颜色，保持与页面风格一致
- 添加聚焦效果，提升用户体验
input[type="text"] {
width: 200px;
padding: 10px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 16px;
outline: none;
}
input[type="text"]:focus {
border-color: #007bff;
}
与其他输入类型区分
HTML中还有如 email、password、number 等输入类型，使用 [type="text"] 能确保只作用于普通文本框，不会误改其他类型。
- 例如 input[type="email"] 需要单独定义
- 若不加限制，用 input 会全局生效
兼容性与注意事项
属性选择器在现代浏览器中支持良好，IE8及以上都可正常使用。
立即学习“前端免费学习笔记（深入）”；
- 注意引号使用：双引号或单引号均可，但建议统一风格
- 值区分大小写，在HTML中type通常为小写
- 避免拼写错误，如写成 "text "（带空格）将无法匹配
