CSS属性选择器
发布时间：2023-03-13 11:09:47 所属栏目：教程 来源：
导读：存否和值选择器
选择器 示例 描述
[attr] a[title] 匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value] a[href=匹配带有一个名为attr的属性的元素，其值正为value&mdash
选择器 示例 描述
[attr] a[title] 匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value] a[href=匹配带有一个名为attr的属性的元素，其值正为value&mdash
|
存否和值选择器 选择器 示例 描述 [attr] a[title] 匹配带有一个名为attr的属性的元素——方括号里的值。 [attr=value] a[href=匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。 [attr~=value] p[class~=“special”] 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。 [attr 竖线 =value] div[lang 竖线=“zh”] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。 1. [attr] 匹配带有一个名为attr的属性的元素——方括号里的值。 <html> <head> <style type="text/css"> a[href] {background-color: #009966;} </style> </head> <body> <h2>[attr]</h2> <p><a name="anchor">不存在href属性</p> <p><a href="#">存在属性href</p> </body> </html> 2.[attr=value] 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。 <html> <head> <style type="text/css"> </style> </head> <body> <p><a name="wwww.baidu.com">wwww.baidu.com</p> </body> </html> 3.[attr~=value] 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。 <html> <head> <style type="text/css"> [class~="first"] {background-color: #009966;} </style> </head> <body> <h2> [class~="first"]</h2> <p><a class="first">first</p> <p><a class="first second">first second</p> <p><a class="second first ">second first </p> </body> </html> **4.[attr |=value] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。连接符- ** <html> <head> <style type="text/css"> [class|="first"] {background-color: #009966;} </style> </head> <body> <h2> [class|="first"]</h2> <p><a class="first">first</p> <p><a class="first second">first second</p> <p><a class="first-second">first-second</p> <p><a class="second first ">second first </p> </body> </html> 子字符串匹配选择器 选择器 示例 描述 [attr^=value] li[class^=“Box-”] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。 [attr$=value] li[class$=“-Box”] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串 [attr*=value] li[class*=“Box”] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。 1 .|[attr^=value] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。 <html> <head> <style type="text/css"> [class^="first"] {background-color: #009966;} </style> </head> <body> <h2> [class^="first"]</h2> <p><a class="first">first</p> <p><a class="first second">first second</p> <p><a class="first-second">first-second</p> <p><a class="second first ">second first </p> </body> </html> 2.[attr$=value] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串 <html> <head> <style type="text/css"> [class$="first"] {background-color: #009966;} </style> </head> <body> <h2> [class$="first"]</h2> <p><a class="first">first</p> <p><a class="first second">first second</p> <p><a class="first-second">first-second</p> <p><a class="second first t">second first t</p> <p><a class="second first">second first</p> </body> </html> 3. [attr=value] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。* <html> <head> <style type="text/css"> [class*="first"] {background-color: #009966;} </style> </head> <body> <h2> [class*="first"]</h2> <p><a class="first">first</p> <p><a class="first second">first second</p> <p><a class="second">second</p> <p><a class="second first first">second first first</p> <p><a class="second first">second first</p> </body> </html> （编辑：驾考网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐