《HTML教程》_2.3教学材料.pptxVIP

CSS选择器的语法如下：CSS的选择器由选择器名和一对花括号（{}）组成，选择器名表示要选择的网页元素，花括号表示选择器的样式集合。花括号中有是若干个声明语句，每条声明语句之间以分号“;”（注意是英文状态的分号）分隔。

声明语句的格式如下：属性名:属性值;其中的冒号和分号都必须是英文状态的符号，如果不慎输成中文状态的冒号和分号，就会出现无法应用样式的情况，这一点需要引起大家的注意。

如果有多条声明语句，最后一条声明语句的后面最好也要加上一个分号，虽然这不是必须的，但这是一个好的习惯，它可以使你在添加声明语句时，减少错误发生的机会。在实际应用中，为了更好的阅读和维护CSS文件，通常以下面的格式编写CSS的选择器，即一行只有一条声明语句。

selector{属性名1:属性值1;属性名2:属性值2; /*非CSS有效成分，只表示省略的声明。以/*开头和以*/结束的为CSS的注释*/...; 属性名n:属性值n;}

CSS中包含很多属性，由于本书不是专门讲述CSS，所以没有全面介绍CSS的属性，用到的属性，在声明语句中通过注释的方式进行解释，所以请各位读者在阅读这部分内容时，一定要对照代码进行理解，不要忽视了代码，阅读代码也是在学习！

需要注意的是，相同的属性重复出现时，将不再进行注释。CSS属性大部分比较直观，可以见名知义。大家可以参考CSS参考手册或者网络搜索学习自己不知道的属性。下面分别介绍CSS的基本选择器。

2.3.1标记选择器

标记选择器也称为元素选择器或类型选择器，是最基本的选择器。选择器名即为标准的HTML元素，即对文档中所有特定的HTML元素指定样式。标记选择器的用法如清单2-1所示。清单2-1CSS标记选择器

styletype=text/css /*选择网页中所有的h2元素，应用红色样式*/h2{ color:red;/*定义元素的颜色为红色*/ }/styleh2这是二级标题/h2h3这是三级标题/h3h2这仍然是二级标题/h2

代码说明如下图：

从清单2-1中可以看出：★标记选择器会选择网页中所有的与选择器名称相同的元素，对它们应用定义的样式，而不论这一标记在什么位置。★凡是与标记选择器名称不一致元素，均不会应用它定义的样式。

2.3.2类选择器类选择器以点号（英文的句号）“.”开头，后根类选择器名字，名字可以是任意字符串，但第一个字符不能是数字，在有些浏览器中不能支持。需要注意的是点号和类选择器名之间不能有空格。

类选择器的声明如下：.className{ /*选择器属性声明*/}类选择器对当前网页（包含类选择器的网页）中所有class属性值等于“类选择器名”的样式起作用。

清单2-2类选择器应用实例styletype=text/css /*选择网页中所有class属性值为mycolor的元素应用样式*/.mycolor{ color:rgb(90%,60%,0%);/*定义元素的颜色为棕色*/ }/styleh1没有应用样式/h1h1class=mycolor

应用类选择器mycolor的样式/h1p此段落没有样式/ppclass=mycolor 此段落应用类选择器mycolor的样式/ppclass=myshape 此段落也没有应用任何样式。/p

代码说明如下图：

通过以上清单可以看出：◆凡是class属性值等于类选择器名的元素都会应用它定义的样式。◆凡是没有包含class属性，或者包含class属性，但其值不等等类选择器名字（这里是mycolor）的，都不会应用类选择器定义的样式。。

◆对于不同的元素，如清单中的h1和p，只要它们的class属性值相同就会应用相同的样式。◆无论class属性值等于类选择器名字的元素有多少个，全部都会应用类选择器定义的样式。如清单中就有两个元素，分别为h1和p应用了mycolor类选择器的样式

2.3.3ID选择器

ID选择器可以为网页中包含特定的id的元素指定样式。ID选择器的构成是以井号“#”开头，后接选择器名（中间无空格）构成，格式如下：#selectorName{ /*CSS属性声明*/}同样，ID选择器的名字的第一个字符也不能是数字，此外还要求在同一网页中id的属性值是唯一的。

虽然浏览器在解析包含多个相同id属性值的网页时不会出现任何问题，但在JavaScript操作这些id元素时就会出现问题，所以一定保证在一个网页中没有id属性值相同的元素。ID选择器应用实例如清单2-3所示。清单2-3ID选择器应用实例

styletype=text/css /*选择