CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

meteorshower2013

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量311

点赞数 1

分类专栏： CSS 文章标签：选择器

本文链接：https://blog.csdn.net/meteorsshower2013/article/details/100702681

版权

7 篇文章 0 订阅

订阅专栏

选择器种类繁多，有时候用着就忘记了，就知道加class，不知道使用其他方式。

选择器分类

4. 属性选择器

根据属性的存在来选择

element['attr'="value"]

根据属性值（各值之间用空格隔开）的一部分来选择元素。

element[attr^="value"]

element[attr$="substring"]

element[attr*="substring"]

element[attr|= "value"]

这个地方有些书本写的是语言属性选择器，因为主要应用场景是语言属性。
也有其他方面的用途。
可以用来匹配属性中用连字符的前缀。

<body>
    <p title='xsl'>卡卡卡卡卡阿卡</p>
    <p title='xsla'>卡卡卡卡卡阿卡</p>
    <p title='xsl-a'>卡卡卡卡卡阿卡</p>
    <p title='axsl'>卡卡卡卡卡阿卡</p>
</body>

    p[title|="xsl"]{
        background-color: red;
    }

这个选择器只匹配属性值为 xsl 或者属性值以 xsl- 开头的。
在这里插入图片描述
注意子串前缀选择器的比较如下：

p[title^="xsl"]{
        background-color: red;
    }

在这里插入图片描述
6. 文档结构选择器
- 后代选择器
- 子代选择器
- 兄弟选择器

关注

专栏目录