1.1 类别选择器
类选择器根据类名来选择
前面以”.”来标志，如：
.demoDiv{
color:#FF0000;
}
如：
<div class="demoDiv">
1.2 标签选择器
p{
color:090;
}
div{
background:#900;
}
1.3 ID选择器
前面以”#”号来标志，在样式里面可以这样定义：
#product{
color:red;
}
<div id="product">
1.4 后代选择器
后代选择器也称为包含选择器，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
如：
<style>
div span{
color:#0000CC;
}
</style>
<div>
黑色
<p>蓝色
<span>也是蓝色</span>
</p>
</div>
1.6子选择器
子选择器（>）和后代选择器（空格）。子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素：
CSS：
#links a {color:red;}
#links > a {color:blue;}
HTML：
<p id="links">
<a href="#">Div+CSS教程</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS2.0教程</a></span>
</p>
我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。
子选择器（>）和后代选择器（空格）的区别：都表示“祖先-后代”的关系，但是>必须是“爸爸>儿子”，而空格不仅可以是“爸爸儿子”，还能是“爷爷儿”、“太爷爷儿子”。
1.7 通用选择器
通用选择器用*来表示。例如：
*{
font-size: 12px;
}
表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。
例如：
p *{
……
}
表示所有p元素后代的所有元素都应用这个样式。
1.8 群组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
1.9 伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
