CSS无难事-div的层次与作用级别.docx

html代码 html代码中，div首先引用了test这个伪类，其名称前面用“.”声明，表示它是一个伪类定义。而用“#”号声明的是id类定义。两种声明方式有何 不同。写过或整合javascript的朋友就知道，id类标记某个div模块是唯一的，当多个id类的名称一样且作用于多个div或者html模块 时，js交互就会出现第一个id标记模块之后模块不起作用或js报错。所以，我这里简单地讲，css中的id类，对于大模块的声明，如#left, #right, #warper等，可以在css文件中定义它的id类样式，而块级的样式定义最好用.test这种伪类形式，留更多空间给做实现的程序员自己标记id号。这 个案例旨在说明定义div的层级使用不同的属性值。如果把color换成其他div定义，道理也是一样的。首先父类定义了蓝色，作用于里面的全部子元素。接着，h3标签使用css中的.test h3定义，其灰色的颜色值覆盖父类.test的蓝色定义。同理，p标签的样式定义覆盖.test的定义。CSS声明的样式定义每递进一层，对应body 中的html标签就会使用相应的颜色值。如果没有这些定义，比如没有“.test p b span font strong”的定义，那么对应的html标签就会使用父类.test的定义，这类似于java编程里面类的继承与重写、覆盖道理一样。在伪类.test中，嵌套了不同的html标签，要注意的是这些标签必须是html的标签，在body中，有对应的html标签与之呼应。如果定义为:.test2 color:#009; /* test2伪类 */.test2 jdk color:#F00; /* 红色 */而div的引用为: java环境搭建上面这样定义，java环境搭建的红色不会起作用，只能继承.test父类的蓝色(#009), 原因是jdk不是html的标签。如果你像jdk起作用，可以将其声明为伪类：.test2 color:#009; .test2 .jdk color:#F00; /* 红色 jdk前面加了一个声明为伪类的. */引用的时候，使用 class=伪类的名称 方式： java环境搭建 java环境搭建 java环境搭建 java环境搭建 java环境搭建 .我们不关注是哪个html标签里面使用class引入，因为它们的效果是一样的，唯独不同的是div、p产生换行，其他标签不换行。这就是html块级元素与非块状元素的区别。默认情况下，块级元素产生换行，非块级元素不换行。源码：美莱氏时尚网div测试 /* 伪类定义 */ .test color:#009; /*蓝色，其属性值等价于#000099的写法*/ .test h3 color:#666; /* 灰色 */ .test p color:#0C6; /* 绿色 */ .test p b color:#900 /* 暗红色 */ .test p b span color:#FF9; /* 黄色 */ .test p b span font color:#909; /* 紫色 */ .test p b span font strong color:#960; /* 咖啡色 */ .test p b span font strong i color:#0FF; /* 青色 */ div无难事系列教程 第一讲：div的层次与作用级别问题(2012-04-30) By美