首页 > 其他分享> > CSS选择器-属性选择器【^ $ * ~ | 】

CSS选择器-属性选择器【^ $ * ~ | 】

2022-02-28 18:02:00 作者：互联网

最近重新学习了CSS3，发现选择器还能这么玩。。介绍一下属性选择器 [^ $ * ~ | ]

我给咱们顺着往下缕一缕（信息量挺大）

刚开始是这样子：

看图片（核心：h1定义一个属性，在CSS中，h1[属性]）：

代码如下：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <style>
        h1[m1]{
            color: darkgreen;
        }
    </style>
</head>
<body>
    <div>
        <h1 m1>我是h1</h1>
        <h1 m1>h1当然是我辣</h1>
        <h1>我是h1哦</h1>
    </div>
</body>
</html>

View Code

然后继续，可以玩出很多花样（给属性赋值以后，可以在样式中添加值，与之对应的才能被选择），看下图：

然后，多重选择，必须要都有，看下图：

还有，当用了^符号，选择的是，必须要以hd开头的，后面是什么不管，看下图：

$符号是以谁结束的，前面是什么不管，看下图：

*，只要属性内容中有，那么就会被选择，看下图：

~ ，只有有单独的词的时候，才会被选中，看下图：

| ，是以内容开始，和中划线连接的，会被选中，如下图：

标签：h1,选择器,选中,下图,CSS,属性
来源： https://www.cnblogs.com/KeithTee/p/15946819.html