属性选择器是一个很偏的知识点，基本开发时用不到，但不代表开发时永远用不到
今天笔者来教你属性选择器里比较难区分的知识点
看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 40px;
width: 200px;
background: black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图
大概是个长方形的黑体
现在进入正文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 40px;
width: 200px;
background: black;
}
div[class*="red"] {
background: red;
}
</style>
</head>
<body>
<div class="inter bg-red"></div>
</body>
</html>效果图
我们使用了*= 将背景改成红色
我们来看一下 *=的定义
选择属性值中包含子串 "red" 的所有元素
那如果我们使用~=会怎么样？
看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 40px;
width: 200px;
background: black;
}
div[class~="red"] {
background: red;
}
</style>
</head>
<body>
<div class="inter bg-red"></div>
</body>
</html>
没有变化，那~=的定义到底是什么呢
定义如下
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）
是的，必须某个词
我们改变下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 40px;
width: 200px;
background: black;
}
div[class~="bg-red"] {
background: red;
}
</style>
</head>
<body>
<div class="inter bg-red"></div>
</body>
</html>
对，这样就可以了
因为 <div class="inter bg-red"></div>
class = "inter bg-red"
这里有2个词
接下来，使用*=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 40px;
width: 200px;
background: black;
}
div[class*="bg-red"] {
background: red;
}
</style>
</head>
<body>
<div class="inter bg-red"></div>
</body>
</html>
现在你是不是发现*=可以代替~=的功能
哈哈，其实各自有各自的优势
~=在多类选择器里使用胜于*=
但*=更具统治力，因为他只需要包括部分字段，而~=需要词列表的某个词
