Css选择器 属性选择器介绍

1.  E[attr]  匹配含有 attr 属性的 E 元素

    eg:

a[class]{
    color: red;
}

    匹配含有 class 属性的 a 标签

2.  E[attr=value]  匹配含有 atter 属性并且属性值为value 的E元素

    eg:

a[class=value]{
    color: red;
}

    匹配含有 class 属性，并且值为 login 的 a 标签

3.  E[attr~=value]  匹配含有 attr 属性，并且属性值列表中含有value这个词的 E 元素

    eg:

a[title~=活动]{
    font-size: 30px;
}

    匹配含有 title 属性，并且属性值列表中含有 活动 这个词的 a 标签

4.  E[attr*=value]  匹配含有 attr 属性，并且属性值列表中含有 value 这个字的 E 元素

    eg:

a[title*=活动]{
    color: red;
}

    匹配含有 title 属性，并且属性值列表中含有 活动 这个字的 a 标签

5.  E[attr^=value]  匹配含有 attr 属性，并且值以 value 开头的 E 元素

    eg:

a[href^=http]{
    color: red;
}

    匹配含有 href 属性，并且值以 http 开头的 a 标签

6.  E[attr$=value]  匹配含有 attr 属性，并且值以 value 结尾的 E 元素

    eg:

a[href$=com]{
    color: red;
}

    匹配含有 href 属性，并且值以 com 结尾的 a 标签

7.  E[attr|=value]  匹配含有 attr 属性，并且值以 value-开头或值为 value 的 E 元素

    eg:

a[class=link]{
    color: red;
}

    匹配含有 class 属性，并且值以 link- 开头或值为 link 的 a 标签

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓