CSS学习日记6-选择器3-属性选择器2

最新推荐文章于 2024-07-19 14:29:49 发布

此时的你才是你

最新推荐文章于 2024-07-19 14:29:49 发布

阅读量589

点赞数

分类专栏： CSS 学习日记文章标签： css

本文链接：https://blog.csdn.net/qq_24681419/article/details/107837174

版权

CSS 学习日记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

二.各种选择器
（一）基本选择器
（二）结构选择器
（三）属性选择器
6.用 * 属性内部任何位置出现值的元素
我们发现，只要出现了目标值，就会被选中，不管是单词还是字符串。

<body>
    <main>
        <article>
           
            <h1 title="solve">只有solve</h1>
            <h1 title="solve the worry">何以解忧，唯有暴富。How to solve the worry, only rich.正常版</h1>
            <h1 title="solvetheworry">何以解忧，唯有暴富。How to solve the worry, only rich.没有空格版</h1>
            <h1 title="solveth eworry">何以解忧，唯有暴富。How to solve the worry, only rich.空错格版</h1>
            <h1 title="solve-the worry">何以解忧，唯有暴富。How to solve the worry, only rich.连字符版</h1>

        </article>
    </main>
</body>

        <style>
            h1[title*="the"]{
                color: red;
             }
        </style>

在这里插入图片描述

7.用 ~ 属性值中包含指定词汇的元素
注意哦，是词汇英语词汇句子直接词汇用空格隔开。所以只有词汇会被选中，字符串包含的不行。

        <style>
           h1[title~="the"]{
                color: red;
            }
        </style>

在这里插入图片描述

8.用 | 以指定值开头或以属性连接破折号的元素
必须是完整且唯一的单词

        <style>
            h1[title|="solve"]{
                color: red;
            }
        </style>

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习日记6-选择器3-属性选择器2

二.各种选择器（一）基本选择器（二）结构选择器（三）属性选择器6.用 * 属性内部任何位置出现值的元素我们发现，只要出现了目标值，就会被选中，不管是单词还是字符串。<body> <main> <article> <h1 title="solve">只有sovle</h1> <h1 title="solve the worry">何
复制链接

扫一扫