属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
属性选择器 通常在表单控件中 使用比较多
根据属性查找
/*用于选取带有指定属性的元素。*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> label[for]{ color: red; } </style> </head> <body> <div> <form> <div> <label for="user">用户名</label> <input type="text" id="user"> </div> </form> </div> </body> </html>
根据属性和值查找
/*用于选取带有指定属性和值的元素。*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> label[for="user"]{ color: red; } </style> </head> <body> <div> <form> <div> <label for="user">用户名</label> <input type="text" id="user"> </div> </form> </div> </body> </html>
表单常用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> input[type="text"]{ color: red; } </style> </head> <body> <div> <form> <div> <label for="user">用户名</label> <input type="text" id="user"> </div> </form> </div> </body> </html>
