CSS ~ 和 * 属性选择器之间的区别是什么

在本文中，我们将介绍 CSS 中的两种不同的属性选择器，即 tilde 和 star。这两种选择器都可以用来选择元素的属性，但有一些细微的差别。

阅读更多：CSS 教程

什么是属性选择器？

在 CSS 中，属性选择器是一种能够选择拥有特定属性或属性值的元素的一种方式。属性选择器是通过在选择器中添加一个方括号来实现的。方括号内部包含属性名称和可选的属性值。

~ 属性选择器

~ 属性选择器匹配具有指定属性的元素，并且该属性值是以给定值开头的。这意味着以下选择器可以选择所有具有指定属性的元素，并且该属性值以给定值开头：

[attribute~="value"]

例如，如果我们想选择属性 “class” 值以 “box” 开头的所有元素，我们可以使用以下选择器：

[class~="box"]

* 属性选择器

属性选择器匹配具有指定属性的元素，并且该属性值包含给定的值。这意味着以下选择器可以选择所有具有指定属性的元素，并且该属性值包含给定的值：

[attribute*="value"]

例如，如果我们想选择属性 “class” 值中包含 “box” 的所有元素，我们可以使用以下选择器：

[class*="box"]

示例说明

让我们通过示例来进一步说明这两种属性选择器之间的区别。

<!DOCTYPE html>
<html>
<head>
<style>
div[class~="box"] {
  color: red;
}

div[class*="box"] {
  color: blue;
}
</style>
</head>
<body>

<div class="box1">This is a box1.</div>
<div class="box2">This is a box2.</div>
<div class="box3 box4">This is a box3 and box4.</div>
<div class="box4">This is a box4.</div>
<div class="box5">This is a box5.</div>

</body>
</html>

在上面的例子中，我们通过 tilde 属性选择器选择所有 class 属性以 “box” 开头的元素，并将它们的颜色设置为红色。同时，我们通过 star 属性选择器选择所有 class 属性中包含 “box” 的元素，并将它们的颜色设置为蓝色。这样，我们可以看到颜色不同的提示信息，以便区分使用了不同属性选择器的元素。