CSS选择器
实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。CSS选择器共有三种：标签选择器、ID选择器、类选择器。
什么是选择器
每一条css样式定义由两部分组成，形式如下：
选择器{
样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。比如，对h1标签样式的声明如下：
几乎所有的html标签均可用作标签选择器（如：body{ } p{ } h1{ } 等等...）
示例：
|
1
2
3
4
5
|
p{
font-size
:
12px
;
background
:
#900
;
color
:
090
;
}
|
则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改p属性就可以了。
类选择器
类选择器在css样式编码中是最常用到的，语法定义如下：
注意：英文圆点开头。
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>Web开发</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="one">Web开发</span>
第三步：设置类选器css样式，如下：
.one{color:red;}
效果图如下：
补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：
<div class="one yellow leftStyle">此处为标签内的文字</div>
这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用
<div id="div1" class="one yellow leftStyle">此处为标签内的文字</div>
ID选择器
ID选择器和类选择器用法一样，区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器，浏览器不会报错但是不符合W3C标准了，所以ID选择器命名必须要唯一性)，就像在你所处的环境中，你只有一个ID(身份证)，不可能重复！ ID选择器以 "#" 来定义。如图：
下面的 HTML 代码中，ID属性为header的所有元素显示为红色，字体为25像素
|
1
|
<div id=“header”>网页头部</div>
|
通用选择器
到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”
*{此处为CSS代码}
强大之处是因为他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)，这样可以大大精简代码；既然有这么强大的功能为什么是用的最少呢，同样还是因为他的强大，他是对父级元素内的所有标签进行定义，所以只要你定义了，那么父级里面的所有的标签，甭管有没有必要，也都相当于加上了通用选择器里面的代码了，能这么说大家不能够完全理解，没关系，我给大家举个例子，请看下面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=gb2312"
/>
<
title
>无标题文档</
title
>
<
style
type
=
"text/css"
>
<!--
#div1 *{
background:#eee;/*设置DIV1里面所有的元素背景均为灰色*/
color:#333;/*设置置DIV1里面所有的元素的字体颜色均为黑色*/
}
-->
</
style
>
</
head
>
<
body
>
<
div
id
=
"div1"
>
<
p
>这里是p标签区域</
p
>
<
div
>这里是a标签区域</
div
>
</
div
>
<
div
id
=
"div2"
>
<
p
>这里是p标签区域</
p
>
<
div
>这里是a标签区域</
div
>
</
div
>
</
body
>
</
html
>
|
对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端
|
1
|
*{
margin
:
0
;
padding
:
0
;}
|
为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下
body,div,p,a,ul,li{margin:0; padding:0;}
如果还需要dl、dt、dd标签重置，那就在上面加上就可以了，如下
body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
