<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style >
???/*2.类选择器：选择class等于某值的所有元素.class是程序员根据逻辑自己给元素增加的分类 */
???.man{
???color: pink;
???}
???/*3.id选择器:选择id等于某值的唯一的元素 */
???#p4{
???color: yellow; ???
???}
???/*4.选择器组：写出一组选择器，选中每个选择器所对应的目标的并集 ?*/
???.man,#p4{
???font-weight: bold;
???}
???/*5.派生选择器 */
???/* 5.1 选择某元素的子孙 */
???#p5 b{
?????color: red;
???}
???/*5.1 选择某元素的儿子 */
???#p5>b{
?????font-size: 30px;
???}
???/*6.伪类选择器：根据元素的状态选择元素 */
???/*6.1 选择未访问的超链接 ?*/
???a:link{
??????color: green;
???}
???/*6.2选择已访问的超链接 ?*/
????a:visited{
??????color: red;
????}
????/*6.3 选择激活态的按钮 */
????#i1:active {
background-color: blue;
}
??/*6.4 选择有焦点的文本框、密码框、文本域*/
??#i2:focus{
???background-color:green;
??}
??/*6.5选择鼠标悬停态（触碰）的图片*/
??img:HOVER {
width: 350px;
height: 350px;
}
</style>
</head>
<body>
????<p class="man">唐僧师徒四人</p>
????<p ?>孙悟空师徒四人</p>
????<p ?class="man">猪八戒师徒四人</p>
????<p id="p4">沙僧师徒四人</p>
????
????<p id="p5">
???????温州市<u>平阳县<b>鳌江镇</b></u>经济<b>开发区</b>B幢5号；
??????
????</p>
????<p>
??????<a href="https://www.baidu.com">百度</a>
??????<a href="https://home.cnblogs.com/blog/">博客园</a>
??????<a href="https://home.cnblogs.com">测试</a>
????
????
????</p>
????<p>
???????<input type="button" value="按钮" id="i1">
????</p>
????<p>
???????<input type="text" id="i2">
??????
????</p>
????<p>
????<img ?src="../images/01.jpg">
????</p>
</body>
</html>
CSS_选择器
原文地址：http://www.cnblogs.com/Bighua123/p/7581057.html