CSS选择器——(二)属性选择器，[attr~=val]以及其他属性选择器的意思

最新推荐文章于 2024-10-11 16:46:33 发布

_4xxxx_

最新推荐文章于 2024-10-11 16:46:33 发布

阅读量2.2k

点赞数 2

分类专栏： CSS基础文章标签： css html css3

本文链接：https://blog.csdn.net/Jackson4X/article/details/104703856

版权

CSS基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

属性选择器

属性选择器从存在和值属性选择器、子串值属性选择器这两个部分来讲
1.存在和值属性选择器
1）[attr]：该选择器选择有attr属性的所有元素，不管attr的属性值是什么
2）[attr=val]：该选择器仅选择attr属性值是val的所有元素
3）[attr~=val]：该选择器选择attr属性的元素，且attr的属性值是以val的属性值列表，列表以空格隔开
说什么都没有代码来的直接，代码如下：

<style>
    div {
        float: left;
        width: 50px;
        height: 50px;
        margin-right: 2px;
    }
    /* 选择有name属性的元素 */
    [name] {
        border: 1px solid red;
    }
    /* 选择有xxxx属性的元素 */
    [xxxx] {
        border: 1px solid green;
    }
    /* 选择name属性且属性值是aa的所有元素 */
    [name = 'aa'] {
        background: grey;
    }
    /* 选择xxx属性且属性值为以空格隔开的值列表中有xx的元素 */
    [xxx ~= 'xx'] {
        border: 2px solid yellow;
    }
</style>
<body>
    <div name='aa'>aa</div>
    <div name='aa'>aa1</div>
    <div name='bb'>bb</div>
    <div name='cc'>cc</div>
    <div xxxx='xxxx'>xxxx</div>
    <div xxx='xx bb'>xx</div>
    <div xxx='aa aa'>xxxx</div>
</body>

结果图如图所示：

2.子串值属性值选择器
1）[attr |= val]：该选择器选择attr属性值是val(包括val)或者以val-开头的元素
2）[attr ^= val]：该选择器选择attr属性值是val开头(包括val)的元素
3）[attr $= val]：该选择器选择attr属性值是val结尾(包括val)的元素
4）[attr *= val]：该选择器选择attr属性值包含val字符串的元素
直接上代码来的直观

<style>
    div {
        float: left;
        width: 50px;
        height: 50px;
        margin-right: 5px;
    }
    /* 选择attr属性是以aa或者以aa-开头的元素 */
    [name |='aa'] {
        border: 1px solid red;
    }
    /* 选择attr属性值是以bb开头的元素 */
    [name ^= 'bb'] {
        border: 1px solid goldenrod;
    }
    /* 选择attr属性值是以cc结尾的元素 */
    [name $= 'cc'] {
        border: 1px solid rgb(23, 6, 182);
    }
    /* 选择attr属性值中包含dd字符串的元素 */
    [name *= 'dd'] {
        border: 1px solid rgb(139, 12, 212);
    }
</style>
<body>
    <div name='aa'>aa</div>
    <!-- 因为name=aabb的div都不符合上述的四条，所以这个没有上述四条的css样式 -->
    <div name='aabb'>aabb</div>
    <div name='aa-bb'>aa-bb</div>
    <div name='bbaa'>bbaa</div>
    <div name='dfdfdd'>dfdfdd</div>
</body>