<html>
<head>
<title>CSS的选择器</title>
<style type="text/css">
/*
CSS的选择器一般使用下面的这种格式
选择符{
属性1:值;
属性2:值;
}
*/
/*例1,匹配<p>元素*/
p{
font-size:20px;/*设置文字字号*/
}
/*例2,类选择器,匹配class为"apple1"的元素*/
.apple1{
color:red;/*设置文字颜色*/
}
.apple2{
font-size:50px;
}
/*例3,ID选择器,匹配id为"potato"的元素*/
#potato{
font-size:15px;
}
/*例4,子选择器,用>符号,匹配first第一代后代生效,第二代之后不生效*/
span{
color:red; /*给span一个默认的样式*/
}
.first>span{
color:blue; /*只有first类的第一代span才有的蓝色样式*/
}
/*例5,包含选择器,用空格符号,匹配"second"类下的所有"span"元素*/
.second span{
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
/*例6,通用选择器,匹配html中的所有标签元素*/
*{
color:green;/*绿色*/
}
/*例7,伪类选择符,用:符号,如在超链接鼠标滑过时改变css样式*/
a:hover{
color:pink;
font-size:30px;
}
/*例8,分组选择符,用逗号,匹配".firstDiv"类,"secondDiv"元素*/
.firstDiv,.secondDiv{
color:purple;
}
</style>
</head>
<body>
<p>匹配到(例1)</p>
<p class="apple1">匹配到(例2)</p>
<span class="apple1 apple2">类选择器词列表方法(例2)</span>
<p id="potato">匹配到(例3)</p>
<p class="first">
<span>蓝一代(例4)
<span>红二代(例4)
</span>
</span>
</p>
<p class="second">
<span>第一代(例5)
<span>第二代(例5)
</span>
</span>
</p>
<a href="http:www.baidu.com">百度(例7)</a>
<div class="firstDiv">分组匹配,firstDiv类(例8)</div>
<div class="secondDiv">分组匹配,secondDiv类(例8)</div>
</body>
</html>原文：http://www.cnblogs.com/KLL916/p/5022452.html