<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [test]{
            color: red;
        }
        [test=t2]{
            color: yellow;
        }
        [test~=t3]{
            color: blue;
        }
        [lang|=en]{
            color: green;
        }
        [test^=test]{
            color: rebeccapurple;
        }
        [test$=t6]{
            color: cadetblue;
        }
        [test*=t7]{
            color: aqua;
        }
    </style>
</head>
<body>

<!-- 属性选择器
    1、attribute：用于选取带有指定属性的元素，与属性的值没有关系。
    2、attribute=value：用于选取带有指定属性和值的元素。
    3、attribute~=value：用于选取属性值中包含指定词汇的元素。
    4、attribute|=value：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    5、attribute^=value：匹配属性值以指定值开头的每个元素。
    6、attribute$=value：匹配属性值以指定值结尾的每个元素。
    7、attribute*=value：匹配属性值中包含指定值的每个元素。
    8、可以使用内置属性（id class等）也可以使用自定义的属性
-->

<!-- attribute
    1、在head中添加样式（演示方便，可以使用link）
    2、用于选取带有指定属性的元素，与属性的值没有关系。
    3、可以使用自定义的属性
 -->
<div test="t1">属性选择器之attribute</div>

<!-- attribute=value
    1、在head中添加样式（演示方便，可以使用link）
    2、用于选取带有指定属性和值的元素。
    3、可以使用自定义的属性
 -->
<div test="t2">属性选择器之attribute=value</div>

<!-- attribute~=value
    1、在head中添加样式（演示方便，可以使用link）
    2、用于选取属性值中包含指定词汇的元素。
    3、可以使用自定义的属性
 -->
<div test="t3 abc">属性选择器之attribute~=value</div>

<!-- attribute|=value
    1、在head中添加样式（演示方便，可以使用link）
    2、用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    3、可以使用自定义的属性
 -->
<div lang="en-us">属性选择器之attribute|=value</div>

<!-- attribute^=value
    1、在head中添加样式（演示方便，可以使用link）
    2、匹配属性值以指定值开头的每个元素。
    3、可以使用自定义的属性
 -->
<div test="test5">属性选择器之attribute^=value</div>

<!-- attribute$=value
    1、在head中添加样式（演示方便，可以使用link）
    2、attribute$=value：匹配属性值以指定值结尾的每个元素。
    3、可以使用自定义的属性
 -->
<div test="t6">属性选择器之attribute$=value</div>

<!-- attribute*=value
    1、在head中添加样式（演示方便，可以使用link）
    2、attribute*=value：匹配属性值中包含指定值的每个元素。
    3、可以使用自定义的属性
 -->
<div test="test7">属性选择器之attribute*=value</div>

</body>
</html>

前端入门

一、前端基础-css-css的选择器之属性选择器

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐