1.选择器——E[属性名]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E[属性名]</title>
<style>li[index]{background:red;}
li[index][title]{background:green;}</style>
</head>
<body>
<ul>
<li index="apple orange banana tomato apply"></li>
<li title="xxx" index="apple tomato apply"></li>
<li index="banana tomato apply"></li>
<li index="apple orange apply"></li>
</ul>
</body>
</html>
2.选择器——E[name=value] 相等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>li[index=apple]{background:red;}</style>
</head>
<body>
<ul>
<li index="apple orange banana tomato apply"></li>
<li title="xxx" index="apple tomato apply"></li>
<li index="banana tomato apply"></li>
<li index="apple orange apply"></li>
<li index="apple"></li>
</ul>
</body>
</html>
3.选择器——包含模糊匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模糊匹配</title>
<style>li[index*=apple]{background:red;}/* 模糊匹配 */</style>
</head>
<body>
<ul>
<li index="apple orange banana tomato apply"></li>
<li title="xxx" index="apple tomato apply"></li>
<li index="banana tomato apply"></li>
<li index="apple orange apply"></li>
<li index="apple"></li>
</ul>
</body>
</html>
3选择器——行首行末匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>li[index^=apple]{background:red;}/*行首*/
li[index$=tomato]{background:green;}/*行末*/</style>
</head>
<body>
<ul>
<li index="apple orange banana tomato apply"></li>
<li title="xxx" index="apple tomato apply tomato"></li>
<li index="banana tomato apply"></li>
<li index="apple orange apply"></li>
<li index="apple apply"></li>
</ul>
</body>
</html>
4.选择器——选择至结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>li[index~=apple]{background:red;}/*选择至结束*/</style>
</head>
<body>
<ul>
<li index="appleorange banana tomato apply"></li>
<li index="appletomato apply tomato"></li>
<li index="banana tomato apply"></li>
<li index="apple orange apply"></li>
<li index="apple apply"></li>
</ul>
</body>
</html>
5.选择器——
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>li[index|=apple]{ background:red;}/* /^name$/ /^name-*/</style>
</head>
<body>
<ul>
<li index="appleorange banana tomato apply"></li>
<li index="apple- tomato apply tomato"></li>
<li index="banana apple-x tomato apply"></li>
<li index="apple orange apply"></li>
<li index="apple"></li>
</ul>
</body>
</html>
