1.1 类别选择器类选择器根据类名来选择 前面以”.”来标志，如： .demoDiv{ color:#FF0000; } 在HTML中，元素可以定义一个class的属性。 如： <div class="demoDiv"> 1.2 标签选择器p{ font-size:12px; 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 { line-height:20px; 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不支持，所以一般伪类都只会被应用在链接的样式上。
|
|
|
