一、[title]:获取有title属性的元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style> [a] { background: red;} /*IE7 √ IE8 √ IE9 √ IE11 √ safari √ firefox √ chrome √*/ </style> </head> <body> <ul> <li a>无序列表第一</li> <li>无序列表第二</li> <li a>无序列表第一</li> <li>无序列表第二</li> <li a>无序列表第一</li> </ul> </body> </html>
二、[title=W3School]:获取title属性值为W3School的元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style> [title=W3School] { background:#FFE4C4;}/*IE7 √ IE8 √ IE9 √ IE11 √ safari √ firefox √ chrome √*/ </style> </head> <body> <ul> <li title="W3School">无序列表第一</li> <li title="11">无序列表第二</li> <li title="W3School">无序列表第三</li> </ul> </body> </html>
三、[title~=hello]:获取title元素中有hello样式(每个样式用空格分割)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style> [title~=hello] { background:red} </style> </head> <body> <ul> <li title="hello wrold">无序列表第一</li> <li title="hellowrold">title属性中有hello英文，但没有空格区分，所以没有选择到</li> </ul> </body> </html>
四、[title|=hello]:用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style> [title|=hello] { background:red} </style> </head> <body> <ul> <li title="hello-wrold">是单词</li> <li title="hello wrold">不为一个单词</li> </ul> </body> </html>
五、[title^=hello]:获取title属性值开头是hello的元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style> [title^=hello] { background:red} </style> </head> <body> <ul> <li title="hello-wrold">hello在开头</li> </ul> </body> </html>
六、[title$=hello]:获取title元素值结尾是hello的元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style> [title$=hello] { background:red} </style> </head> <body> <ul> <li title="wroldhello">hello在结尾</li> </ul> </body> </html>
七、[title*=hello]:获取title元素值中存在hello的元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style> [title*=hello] { background:red} </style> </head> <body> <ul> <li title="wroldhellowrold">中间有hello</li> </ul> </body> </html>