p[lang] - 选择具有lang属性的所有段落元素。
p[lang=fr] - 选择lang属性值完全为fr的所有段落元素。
p[lang~=fr] - 选择lang属性值包含单词fr的所有段落元素。
p[lang|=en] - 选择lang属性值完全为en或以en-开头的所有段落元素。
以下是使用css属性选择器为表单添加样式的代码：
示例 演示
<!doctype html><html><head><style>body { font-family: "segoe ui", tahoma, geneva, verdana, sans-serif;}input[type="text"] { width: 300px; display: block; margin-bottom: 10px; background-color: rgb(195, 250, 247); font-size: 18px; padding: 15px; border: none;}input[type="submit"] { padding: 10px; font-size: 18px; border: none; outline: none; background-color: rgb(75, 163, 16); color: white;}input[type="password"] { width: 300px; padding: 10px; background-color: red; color: white; border: none;}</style></head><body><h1>css attribute selector example</h1><form><label for="fname">first name:</label><br /><input type="text" id="fname" name="fname" value="ron" /><label for="lname">last name:</label><br /><input type="text" id="lname" name="lname" value="shaw" /><label for="pass">password:</label><br /><input type="password" id="pass" name="pass" value="password" /><input type="submit" value="submit" /></form></body></html>
输出上述代码将产生以下输出 −
以上就是使用 css 属性选择器设置表单样式的详细内容。