CSS的selector极其强大，大致分为通配符、元素、群组、关系、id及class、伪类、属性、伪对象这八种，下面将进行详细介绍：
一、通配选择符
选中HTML文档中的所有标签，语法：
*{
代码块；
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<h1>这是h1标签</h1>
<h3>这是h2标签</h3>
<p>这是p标签</p>
</body>
</html>
演示结果:
这是h1标签
这是h2标签
这是p标签
一、元素选择器
指定元素标签，则选定文档中所有此标签
body{
代码块；
}
<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en"> <head> <title></title> <style> .myclass{ /* class选择符 */ color:gray; } #myid{ /* id选择符 */ color:green; } </style> </head> <body> <h1 class="myclass">这是h1标签</h1> <h3 id="myid">这是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" id="txt"> <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 lang="en"> <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" id="nav1">导航1</a>| <a href="#nav2" id="nav2">导航2</a>| <a href="#nav3" id="nav3">导航3</a> </body> </html>