一、复习
1、样式表的书写方式
2、已经讲过的选择器的优先级
3、练习测试（在规定时间内上交）
二、新课
（一）元素指定选择符
1．标记名#id指定选择符
标记名#id属性值 { 样式规则; }
例如：p#first { 样式规则; }
则该样式表仅对<pid="first" >标记有效，由于id属性值必须惟一，等价：#first { }，这样写可以针对老版本浏览器。
注意：标记名与“#”之间、“#”前后都不能有空格。
2．标记名.class指定选择符标记名.样式类名 { 样式规则; }
仅对指定标记类型且使用calss="样式类名"的标记有效。
该方式可用于对同一类标记再进行分类，有选择的指定其中一部分标记。例如需要对页面中多个超链接<a>分组指定不同的样式，则可以按组分别指定calss属性，再使用a.class选择符为不同组的超链接定义样式表。
注意：标记名与“.”之间、“.”前后都不能有空格。
（二）群组与通用选择符
1．群组选择符
标记名选择符, #id选择符, .class选择符, …… { 样式规则; }
群组选择符就是将任意多个标记名、id、class选择符用逗号隔开共同定义一个样式表，该样式表对所有的选择符都有效，相当于对各个选择符单独定义了完全相同的样式表。
例如：p, h3, div { 样式规则; }
#first, .sec, .item, div { 样式规则; }
2．通用选择符
* { 样式规则; }
通用选择符是一个特殊的群组选择符，用通配符*表示任意标记，为页面中所有元素定义通用的样式规则，就是说该方式定义的样式表对页面中的所有标记都有效，包括<body>标记。
（三）包含与子对象选择符
多个选择符用空格隔开的组合称为包含选择符，该样式表仅对按选择符顺序都符合条件的标记有效，就是说只对按选择符顺序逐级包含在最内层的标记有效。相当于多条件选择样式表，只对符合条件的标记有效。
1．标记名包含选择符
标记名1 标记名2 … { 样式规则; }
标记名包含选择符仅对按顺序包含在最内层的标记有效，标记名之间必须用空格隔开。
例如：div li span { color:red; font-weight:bold; }
注意：包含选择符的多个标记名之间用空格隔开而不是逗号，如果用逗号隔开就是群组选择符—对所有标记都有效。2．id标记名包含选择符
#id属性值 标记名 { 样式规则; }
该样式表仅对使用了指定id标记内所包含的所有指定类型的标记有效。虽然id标记只有一个，但其内部的多个指定类型的标记都使用该样式。
例如：#sidebar img { 样式规则1; }
#sidebar h2 { 样式规则2; }
3．class类名标记名包含选择符.样式类名 标记名 { 样式规则; }
该样式表对所有使用calss="样式类名"标记内所包含的指定标记有效。
例如：.fancy td { 样式规则; }
除了使用包含选择符用外层标记为条件对其包含的标记指定样式表外，还可以根据标记的前后关系用前一个标记为条件，对它相邻的下一个标记指定样式表—相邻选择符。
标记名||id属性||class类选择符+ 标记名||id属性||class选择符
{ 样式规则; }
相邻选择符仅对它前面的一个标记必须满足“+”前选择符条件、而它自己又满足“+”后选择符条件的那些标记定义样式表。
例如：span+p { 样式规则; }
则该样式表仅对<span>之后相邻的下一个<p>标记有效，对<span>标记无效、对前面相邻不是<span>的<p>标记也无效。
再例如：.one+.two { 样式规则; }
则该样式表仅对使用了class="one"的标记之后相邻的下一个、且必须使用class="two"的那些标记有效。
扫一扫
4495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
