正文  软件开发 > html5 >

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

[attribute|=value]和[attribute^=value]选择器区别,attributevalue1、[attribute|=value] [attribute|=value]选择...

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

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>

http://www.bkjia.com/HTML5/1223538.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1223538.htmlTechArticle[attribute|=value]和[attribute^=value]选择器区别,attributevalue 1、[attribute|=value] [attribute|=value]选择器说明:http://www.w3school.com.cn/cssref/selector_attrib...