ID选择器ID选择器是通过元素的ID来进行选择的，对于同一个HTML页面，每一个元素的ID都是惟一的，所以ID选择器具有唯一性 在样式表中，ID选择器前面以“#”进行标识，下面举例说明 /*ID选择器的CSS样式*/
#content{
font-size:14px;
}
/*HTML中的内容*/
<div id="content">
这是一个ID选择器的例子
</div>
网页的预览效果是：“这是一个ID选择器的例子”这句话的字体大小是14像素 类选择器类选择器是通过元素的class属性值来进行选择的，多个元素可以同时具有相同的class属性值，所以它可以实现“一对多”的样式控制。凡是具有相同class属性值的元素都会应用对应的样式。 在样式表中，类选择器前面以“.”进行标识，下面举例说明 /*类选择器的CSS样式*/
.content{
background:# FF0000 ; //背景色为红色
}
/*HTML中的内容*/
<div class="content">
这是一个类选择器的例子1
</div>
<div>
下面是一个段落
<p class="content">
这是一个类选择器的例子2
</p>
</div>
网页的预览效果是：“这是一个类选择器的例子1”和“这是一个类选择器的例子2”两句话的背景色是红色的，而“下面是一个段落”这句话没有样式。 标签选择器标签选择器是通过元素的标签进行选择的。大家都知道HTML页面中的元素都是通过标签进行整合的，具有相同标签的元素就会应用相同的样式 在样式表中，标签选择器的前面什么都不用加，只需写出标签名即可，下面举例说明 /*标签选择器的CSS样式*/
p{
color:blue ;
fontsize-12px;
}
/*HTML中的内容*/
<p>段落1</p>
<div class="example">
下面是一个段落
<p>段落2</p>
</div>
网页的预览效果是：“段落1”和“段落2”两句话的字体是蓝色的，大小是12像素；“下面是一个段落”这句话没有任何样式 伪类选择器最常用的伪类选择器就是对连接标签<a>应用的选择器，下面举例说明 /*伪类选择器的CSS样式*/
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
/*HTML中的内容*/
<a href="http://www.baidu.com" target="_blank">连接到百度</a>
网页的预览效果是：连接默认没有下划线，当鼠标悬停时有下滑下，访问过后没有下划线 属性选择器属性选择器是根据特定标签的特定属性值或者是属性的有无来进行选择的，举例如下 /*属性选择器的CSS样式*/
p[title]{font-size=14px;}
或者
p[title="123"]{ font-size=18;}
如果<p>标签有“title”属性，则将该段设为字体14像素；如果<p>标签的“title”属性值为“123”，则将该段设为字体18像素 后代选择器后代选择器是通过指定父代的所有指定后代（包括直接后代和深层次后代）进行选择的，它通常由两个常用标签组合形成。通过使用后代选择器，可以实现更精确的样式控制，是非常常用的一种CSS选择器。 父选择器和后代选择器之间以空格分隔，下面举例说明： /*后代选择器的CSS样式*/
.father p{
color:blue;
}
/*HTML中的内容*/
<div class="father">
这是父元素
<p>
这是子元素
</p>
</div>
网页的预览效果是：" 这是父元素 "这句话没有样式，而“这是子元素”这句话的字体颜色是蓝色 子选择器子选择器与后代选择器非常类似，他们的区别是：后代选择器将样式用到父元素的所有后代当中（包括直接后代和深层次后代），而子选择器只将样式用到父元素的直接后代元素，只有“儿子”能用到、“孙子”以及“重孙子”用不到。 父选择器和子选择器之间以“>”分隔，下面举例说明 /*子选择器的CSS样式*/
.father>.son{
background:blue;
}
/*HTML中的内容*/
<div class="father">
<div class="son">
这是子元素
<div class="son">
这是孙子元素
</div>
</div>
</div>
网页的预览效果是："这是子元素"这句话的背景色是蓝色的；“这是孙子元素”这句话的背景色是白色的（没有样式） 如果将“>”改为空格 即 “.father .son”，则两句话的背景色都是蓝色的。 通用选择器通用选择器即应用于所有标签的选择器，用“*”表示，举例如下： /*通用择器的CSS样式*/
*{
margin：0；
padding：0；
}
将所有“盒子”的外边距和内边距都设为0，这句话通常用在CSS样式表的开头，用作初始化。 参考资料[1]. http://blog.csdn.net/wwwwenhuan/article/details/7649749 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||