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

最新推荐文章于 2021-11-22 12:58:41 发布

苘迷

最新推荐文章于 2021-11-22 12:58:41 发布

阅读量409

点赞数 1

分类专栏：前端文章标签： css [attribute|=value] [attribute^=value] 选择器区别

原文链接：https://www.mk2048.com/blog/blog.php?id=h0ach0cjkhib&title=%5Battribute%7C%3Dvalue%5D%E5%92%8C%5Battribute%5E%3Dvalue%5D%E9%80%89%E6%8B%A9%E5%99%A8%E5%8C%BA%E5%88%AB

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

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>

更多专业前端知识，请上【猿2048】www.mk2048.com

苘迷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[attribute|=value]和[attribute^=value]选择器区别

1、[attribute|=value] [attribute|=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attribute_va...
复制链接

扫一扫