打赏

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

1、[attribute|=value]

[attribute|=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp

选择 lang 属性值以 "val" 开头的元素

该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

[attribute|=value]是CSS2选择器，浏览器都支持。

2、 [attribute^=value] 

[attribute^=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attr_begin.asp

[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>

 

posted @ 2017-08-21 14:45  孟繁贵  阅读(470)  评论(0)  编辑  收藏  举报
TOP