不只是可以在img标签中使用其他标签同样可以根据属性进行类似操作。
[alt] 首先有此属性 [alt="漂亮图片"]精准匹配 [alt^="abd"] 开头匹配 [alt$="abd"] 尾部匹配 [alt*="abd"] 任意位置匹配 [alt|="abd"] abd- 开头 [alt~="abd"] abd以空格分开的独立部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img[alt] {
width:200px;
}
/* [alt] 首先有此属性
[alt="漂亮图片"]精准匹配
[alt^="abd"] 开头匹配
[alt$="abd"] 尾部匹配
[alt*="abd"] 任意位置匹配
[alt|="abd"] abd- 开头
[alt~="abd"] abd以空格分开的独立部分
*/
img[alt="图"] {
border: 1px solid #000;
}
img[alt^="漂"] {
border: 2px solid #4f17d36b;
}
img[alt$="的"] {
border: 3px solid yellow;
}
img[alt~="亮"] {
border: 4px solid green;
}
img[alt|="图片"] {
border: 3px solid red;
}
</style>
</head>
<body>
<img src="logo copy.png" alt="图片-漂亮">
<img src="logo copy.png" alt="图">
<img src="logo copy.png" alt="漂亮">
<img src="logo copy.png" alt="图漂亮的">
<img src="logo copy.png" alt="片 亮">
</body>
</html>
