[attribute|=value]和[attribute^=value]接受器差距分分快

作者:分分快三计划

总括: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>

1、[attribute|=value]

[attribute^=value]选拔器表达:

演示代码:

[attribute|=value]是CSS2接收器,浏览器都扶助。

[attribute|=value]选取器表明:

该值必得是全部单词,比如 lang="en",抑或前边随着连字符,比如 lang="en-us"。

 

 [attribute^=value]是CSS3采取器,不过浏览器也都协助。

 

筛选 lang 属性值以 "val" 开始的要素

 

[attribute^=value] 选择器相称属性值以钦点值带头的每一种成分。

2、 [attribute^=value

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划