CSS选择器
CSS的selector极其强大，大致分为通配符、元素、群组、关系、id及class、伪类、属性、伪对象这八种，下面将进行详细介绍：
一、通配选择符
选中HTML文档中的所有标签，语法：
*{
代码块；
}
<!DOCTYPE html>
<html >
<head>
<title></title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<h1>这是h1标签</h1>
<h3>这是h2标签</h3>
<p>这是p标签</p>
</body>
</html>演示结果:
这是h2标签
这是p标签
一、元素选择器
指定元素标签，则选定文档中所有此标签
body{
代码块；
}
<!DOCTYPE html>
<html >
<head>
<title></title>
<style>
h3{
color:red;
}
</style>
</head>
<body>
<h1>这是h1标签</h1>
<h3>这是h2标签</h3>
<p>这是p标签</p>
</body>
</html>演示结果：
这是h1标签
这是h3标签
这是p标签
三、群组选择符
指定多个标签，用逗号隔开，则选择页面中所有这些标签
h1,p{
代码块；
}
<!DOCTYPE html>
<html >
<head>
<title></title>
<style>
h1,p{
color:red;
}
</style>
</head>
<body>
<h1>这是h1标签</h1>
<h3>这是h2标签</h3>
<p>这是p标签</p>
</body>
</html>演示结果：
这是h1标签
这是h3标签
这是p标签
四、关系选择符
通过元素在文档结构中的位置进行选择
1.包含选择符：选择所有被E元素包含的F元素
eg: E F{ code; }
2.子选择符：选择所有作为E元素的子元素F
eg: E>F{ code; }
3.相邻选择符：选择紧贴在E元素之后的F元素
eg: E+F{ code; }
4:兄弟选择符：选择所有与E同级的F元素（E不选中）
eg: E~F{ code; }
<!DOCTYPE html>
<html >
<head>
<title></title>
<style>
p small{ /* 包含选择符 */
color:blue;
}
ul > li{ /* 子选择符 */
color:red;
}
h1+small{ /* 相邻选择符 */
color:yellow;
}
h1~h3{ /* 兄弟选择符 */
color:green;
}
</style>
</head>
<body>
<h1>这是h1标签</h1>
<small>这是small标签</small>
<h3>这是h3标签</h3>
<small>这是small标签</small>
<p><small>在是p元素里的small标签</small></p>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
</html>演示结果：
这是h1标签
这是small标签
这是h3标签
这是small标签
这里p元素的small标签
第一项
第二项
五、id及class选择符
给标签添加id属性火class属性
<html >
<head>
<title></title>
<style>
.myclass{ /* class选择符 */
color:gray;
}
#myid{ /* id选择符 */
color:green;
}
</style>
</head>
<body>
<h1 class="myclass">这是h1标签</h1>
<h3 >这是h2标签</h3>
</body>
</html>结果演示：
这是h1标签
这是h3标签
六、伪类选择符
伪类的selector有非常多，我将其分为以下3类：
1.状态型：
E:link 设置超链接a（元素E）在未被访问前的样式
E:visited 设置超链接a（元素E）已被访问过的样式
E:hover 设置鼠标在超链接a（元素E）悬停时的样式
E：active 设置鼠标点击时（直到释放）超链接a（元素E）的样式
E：focus 设置元素成为输入焦点时的样式
E:checked 设置界面上处于选中状态的元素E（checkbox、radio、select等）
E:enabled 设置界面上处于选中状态的元素E
E:disabled 设置界面上处于禁用状态的元素E
2.文档结构型
E:first-child 选中父元素的第一个子元素E
E:last-child 选中父元素的最后一个子元素E
E:only-child 选中父元素仅有一个子元素E
E:nth-child(n) 选中第n个子元素E
E:nth-last-child(n) 选中倒数第n个子元素E
E:first-of-type 选中同类型中第一个同级元素
E:last-of-type 选中同类型中最后一个同级元素
E:only-of-type 选中同类型中唯一一个同级元素
E:nth-of-type 选中同类型中第n个同级元素
E:nth-last-of-type(n) 选中同类型中倒数第n个同级元素
3.其他
E：lang(fr) 选中使用特殊语言的E元素（双语页面时才可能用）
E：nos(s) 选中不含s选择符的元素E
E: root 选中E元素所在文档的根元素，一般指html
E: empty 选中没有子元素（包括text节点）的元素E
E target 选中相关URL指向的E元素
设置a连接
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
a:link{ color:black; } /* 元素被访问前的样式 */
a:visited{ color:yellow; } /* 元素被访问后的样式 */
a:hover{ color:red; } /*鼠标经过元素时的样式 */
a:active{ color:blue; } /* 鼠标点击时的样式 */
</style>
</head>
<body>
<a href="#">超链接</a>
</body>
</html>设置表单元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#txt:focus{ background-color:yellow; } /* 设置获取焦点时的样式 */
.check:checked{ width:20px } /* 设置元素被选中时的样式 */
.able:disable{ color:red; } /* 设置元素被禁用时的样式 */
.able:enable{ color:green; } /*设置元素可用时的样式*/
</style>
</head>
<body>
<input type="text" >
<input type="checkbox" value="0" class="check">
<input type="checkbox" value="1" class="check">
<input type="radio" name="num" value="0" class="able" disable>
<input type="radio" name="num" value="0" class="able">
</body>
</html>设置列表的特定项
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
li:first-child{ color:red; } /*选中父元素中第一个子元素*/
li:last-child{ color:green; } /*选中父元素中之后一个子元素*/
li:nth-child(2){ color:orange; } /*选中第n个子元素*/
li:nth-last-child(2){ color:yellow; } /*选中第n个子元素*/
li:only-child{ color:blue; } /*选中父元素中唯一一个子元素*/
</style>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
<ol>
<li>唯一一项</li>
</ol>
</body>
</html>设置特定的同类标签
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p:first-of-type{ color:red; } /* 选中同类型中第一个同级元素 */
p:last-of-type{ color:green; } /* 选中同类型中最后一个统计元素 */
p:nth-of-type(2){ color:orange; } /* 选中同类型中第n个同级元素 */
p:nth-last-of-type(2){ color:yellow; } /* 选中同级倒数第n个同级元素 */
p:only-of-type{ color:blue; } /* 选中同级中唯一一个元素 */
</style>
</head>
<body>
<p>这是第一个p标签</p>
<p>这是第一个p标签</p>
<p>这是第一个p标签</p>
<p>这是第一个p标签</p>
<div>
<p>这是div元素里的唯一一个p标签</p>
</div>
</body>
</html>target设置导航样式，标签中的属性href必须指向自己的id
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
font-family:"微软雅黑";
font-size: 20px;
text-decoration: none;
color: black;
}
a:target{
color: red;
}
</style>
</head>
<body>
<a href="#nav1" >导航1</a>|
<a href="#nav2" >导航2</a>|
<a href="#nav3" >导航3</a>
</body>
</html>