css选择器的区别

luofeiyu

1.7k29361715

发布于
2018-08-21

[ attribute ~= value ] 用于选取属性值中包含指定词汇的元素。
[ attribute *= value ] 匹配属性值中包含指定值的每个元素。

p[class ~= "lone"]
p[class *= "lone"]

两者好像没有区别哈？

javascript

阅读 2k

3 个回答

得票最新

桃子_Lisa

1.1k119

发布于
2018-08-21

✓ 已被采纳

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style type="text/css">
    p[class ~= "lone"]{
      color: red;
    }
    p[class *= "abc"]{
      color: blue;
    }
  </style>
</head>
<body>
  <p class="lone">lone: 红色</p>
  <p class="abc">abc: 蓝色</p>
  <p class="lone1">lone1: 未匹配</p>
  <p class="abc1">abc1: 蓝色</p>
</body>
</html>

一个是包含某个词，一个是包含某个字符串是不一样的