1、[attribute|=value][attribute|=value]选择器说明 >选择 lang 属性值以 "val" 开头的元素该值必须是整个单词,比如 lang="en",或者后面跟着连字符,比如 lang="e ...
1、[attribute|=value]
[attribute|=value]选择器说明 >选择 lang 属性值以 "val" 开头的元素
该值必须是整个单词,比如 lang="en",或者后面跟着连字符,比如 lang="en-us"。
[attribute|=value]是CSS2选择器,浏览器都支持。
2、 [attribute^=value]
[attribute^=value]选择器说明 >[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。
[attribute|=value]是CSS3选择器,但是浏览器也都支持。
总结:2个选择器的区别是[attribute|=value]必须是选取整个单词或者中间有连字符的单词, [attribute^=value] 无此限制!
示例代码:
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>[attribute|=value]和[attribute^=value]选择器区别</title> <style type="text/css"> /*3个DIV均起作用*/ div[class^='test'] { color: red; } /*只有前2个DIV起作用*/ div[class|='test'] { color: green; } </style> </head> <body> <div class="test"> 555 </div> <div class="test-test"> 666 </div> <div class="test2"> 666 </div> </body></html>
原标题:[attribute=value]和[attribute^=value]选择器区别
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。