你的位置:首页 > 软件开发 > 网页设计 > [attribute=value]和[attribute^=value]选择器区别

[attribute=value]和[attribute^=value]选择器区别

发布时间:2017-08-21 15:00:08
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 (#换成@)。

可能感兴趣文章

我的浏览记录