<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 通配选择符 */
* {
margin: 0;
padding: 0;
}
/* 类型选择符 */
ul {
list-style: none;
}
/*
* 属性选择符
* [attribute] 用于选取带有指定属性的元素 IE6不支持
* [attribute=value] 用于选取带有指定属性和值的元素 IE6不支持
* [attribute~=value] 用于选取属性值中包含指定词汇的元素 IE6不支持
* [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 IE6不支持
* [attribute^=value] 匹配属性值以指定值开头的每个元素 IE6不支持
* [attribute$=value] 匹配属性值以指定值结尾的每个元素 IE6不支持
* [attribute*=value] 匹配属性值中包含指定值的每个元素 IE6不支持
*/
a[href] {
border: 2px dotted #f00;
}
a[href="1"][class="link link1"] {
border: 2px dotted #0f0;
}
a[class~="link2"] {
border-color: #00f;
}
a[href|="3"] {
border-width: 4px;
}
a[href^="3-"] {
border-width: 6px;
}
a[href$="-4"] {
border-width: 4px;
}
a[href*="-"] {
border-width: 2px;
}
/* 包含选择符 */
ul a {
margin-left: 10px;
}
/* 子选择符 IE6不支持 */
.list > li {
margin-left: 10px;
}
/* ID选择符 */
#list1 {
margin-left: 10px;
}
/* 类选择符 */
.list {
margin-top: 10px;
}
/* 选择符分组 */
.link1, .link2, .link3 {
background-color: #ddd;
}
/* 相邻选择符 IE6不支持 */
.link1 + * {
background-color: #ff0;
}
</style>
</head>
<body>
<div>
<ul class="list" id="list1">
<li>
<a class="link link1" href="1">1</a>
<ul>
<li>11</li>
</ul>
<p>12</p>
</li>
<li><a class="link link2" href="2">2</a></li>
<li><a class="link link3" href="3-4">3</a></li>
</ul>
</div>
</body>
</html>
31种选择器的应用