属性选择器(拷贝自菜鸟教程)
栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 100px;
}
img[src$='.jpg']{
width: 150px;
}
img[src^='./']{
border: 1px solid red;
}
/*[attribute~=value]只对属性值为英文句子的属性生效*/
div[title~='name']{
color: red;
}
div[name~='李逍遥']{
color: black;
}
img[src*='5b']{
width: 500px;
}
/*[attribute|=value]只对属性值使用了连词符号的属性,中英文都可以()*/
div[hi|=你好]{
color:blue;
}
div[do|=you]{
font: 20px '方正姚体';
}
</style>
</head>
<body>
<img src="1.属性选择器.html" />
<img src="./asset/img/5b75696a1aaf0.jpg" />
<img src="./asset/img/5b75696ab7a0d.jpg" />
<div title="my name is gh" name="我是李逍遥" hi="你好-世界" do="you-do">我系渣渣辉</div>
</body>
</html>