1.E[att] 选择具有attr属性的E元素。
2.E[att="val"] 选择具有att属性且属性值等于val的E元素
3.E[att~="val"] 选择具有att属性的元素，且元素值列表中有一个符合val的元素
4.E[att^="val"] 选择E元素中有att属性，且以val开头的元素。
5.E[att$="val"] 选择E元素中有att属性，且以val结尾的元素。
6.E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素。
1.E[att]选择具有attr属性的E元素。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
option[disabled]{color: red;}
</style>
</head>
<body>
<select name="">
<option value="0">火车</option>
<option value="1" disabled="disabled">汽车</option>
<option value="2">轮船</option>
<option value="3">飞机</option>
</select>
</body>
</html>
显示汽车为红色。如果要全部变为红色可把 disabled 换为 value。
2.E[att="val"] 选择具有att属性且属性值等于val的E元素。（他不仅要有符合的属性，值也要符合才会被选中。）示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
input[type="text"]{height: 100px;}
</style>
</head>
<body>
<form action="" method="post">
<input type="text" placeholder="这是文本框"/>
<input type="password" placeholder="这是密码"/>
<input type="radio"/>
<input type="submit"/>
</form>
</body>
</html>
显示输入文本区域高为100像素
3.E[att~="val"]选择具有att属性的元素，且元素值列表中有一个符合val的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class~=p1]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColor">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColor">段落五</p>
</div>
</body>
</html>
显示为第一个和最后一个是红色的。
4.E[att^="val"]选择E元素中有att属性，且以val开头的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class^=p]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColor">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColor">段落五</p>
</div>
</body>
</html>
全部显示为红色。
5.E[att$="val"]选择E元素中有att属性，且以结尾的元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
p[class$=p]{color: red;}
</style>
</head>
<body>
<div>
<p class="p1 pMore pColor">随便写点</p>
<p class="pMore pColor">段落二</p>
<p class="p12 pMore pColorp">段落三</p>
<p class="p11 pMore pColor">段落四</p>
<p class="pMore p1 pColorp">段落五</p>
</div>
</body>
</html>
段落三和段落五为红色
6.E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a[href*="jd"]{color: red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://www.jd.com">京东</a>
</body>
</html>
京东显示为红色。