CSS3 之 属性选择器

[attr]

[attr] 单独使用是匹配所有 带 attr 属性的标签

a[attr] 匹配a标签下 带 attr 属性的标签

语法

[attr]
{
    CSS 样式
}

实例

选择包含 target 属性的标签

<style type="text/css">
    /* 选择a标签里包含 target 属性的值 */
    a[target]{
        background-color: #00FFFF;
    }
</style>

<a href="https://bigdataboy.cn" target="_blank">大数据男孩</a>

[attr=value]

用于选择 指定 属性和值 的标签。

语法

[attribute=value]
{
    CSS 样式
}

实例

style type="text/css">
    /* a 标签里 id 为 bigdataboy 的标签 */
    a[id="bigdataboy"]{
        background-color: red;
    }
</style>

<a id="bigdataboy" href="https://bigdataboy.cn" target="_blank">大数据男孩</a>

[attr*=value]

选择 attr 属性中包含value值的标签

语法

[attr*=value]
{
    CSS 样式
}

实例

<style type="text/css">
    a[id*="data"]{
        background-color: red;
    }
</style>

<a id="bigdataboy" href="https://bigdataboy.cn" target="_blank">大数据男孩</a>

[attr^=value]

选择 attr 属性中以value值开头的标签

语法

[attr^=value]
{
    CSS 样式
}

实例

<style type="text/css">
    a[id^="big"]{
        background-color: red;
    }
</style>

<a id="bigdataboy" href="https://bigdataboy.cn" target="_blank">大数据男孩</a>

[attr$=value]

选择 attr 属性中以value值结尾的标签

语法

[attr$=value]
{
    CSS 样式
}

实例

<style type="text/css">
    a[id$="boy"]{
        background-color: red;
    }
</style>

<a id="bigdataboy" href="https://bigdataboy.cn" target="_blank">大数据男孩</a>

[attr~=value]

选择 attr 属性中包含value值的标签，注意有一个坑 下面实例有说明

语法

[attribute~=value]
{
    CSS 样式
}

实例

<style type="text/css">
    a[id~="data"]{
        background-color: red;
    }

</style>
<!-- 注意id是有 空格 的，没有空格不能识别包含 -->
<a id="big data boy" href="https://bigdataboy.cn" target="_blank">大数据男孩</a>