使用属性选择器的解决方案
在下面的示例中，我们使用 CSS 背景、宽度、高度和边框属性为 <input> 元素的 name 属性设置样式。
将一些 CSS 样式应用于元素名称的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
input[name="username"] {
background: #76d67e;
width: 200px;
height: 25px;
padding: 0 5px;
border: 2px solid #cccccc;
}
</style>
</head>
<body>
<input type="text" name="username" autofocus>
</body>
</html>
让我们看另一个例子，我们使用两个 <input> 元素，其中一个带有 name 属性，必须设置样式。
将 CSS 样式应用于元素名称的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
input[name="age"] {
width: 50px;
}
</style>
</head>
<body>
<h1>对元素名称应用 CSS 样式的示例：</h1>
<form>
<input type="text" placeholder="Name">
<input type="number" name="age" min="0" placeholder="Age">
</form>
</body>
</html>
我们可以使用基于属性匹配元素的属性选择器，将 CSS 样式应用于元素名称。
日期：2020-06-02 22:14:57 来源：oir作者：oir