详解CSS继承特性和层叠特性

一、继承特性：

1、学过Java和C++的都注意到，属于父亲的protected字段或方法肯定会被孩子所继承，而CSS也具备此特性，看下面的例子：

     
     
           
                 
                 
                 

           

 

                          CSS的继承性演示

• 首页

                                 
• 简介

                                 
• 联系

                         

                 

           
     

2、对于这个HTML来讲，div是body的儿子，ul是div的儿子，li是ul的儿子，无论div、ul还是li均是body的后代，其层次关系如下图：

body

       |

       |——div   （其内容：CSS的继承性演示）

                 |

                 |——ul

                          |

                          |——li （其内容：首页、简介、联系）

3、对于这个文件定义了一个body标记选择器，把颜色值设置为红色，如下：

body
    {
           color:red;            
    }

4、使用浏览器打开这个html文件，会发现无论是div的内容(CSS的继承性演示)还是li的内容（首页、简介、联系）均是以红色字体显示，这也说明body的后代自动继承了它的特性。

5、HTML的效果如下，其中的虚框是div的范围：

二、层叠特性：

1、网页中的某个元素很有可能会被若干个选择器所修饰，这样就造成了选择器的冲突，那么到底是以哪个选择器为准呢？只要记住如下优先级即可：行内选择器 > ID选择器 > 类选择器 > 标记选择器

2、举例：

（1）定义mycss.css文件

        .red
        {
                color:red;
        }

        .purple
        {
                color:purple;
        }

        #blue
       {
                color:blue;
       }

       #yellow
       {
                color:yellow;
       }

（2）定义myhtml.htm文件，部分主要内容如下：

     

             

     

     

             

这是一个文本

             

这是带类别选择器的文本

             

这是带ID和类别选择器的文本

             

这是带行内和ID选择器的文本

             

这是带两个类别选择器的文本

             

这是带两个ID选择器的文本

     

（3）效果：

（4）解释：

第一个P没有使用选择器，所以采用HTML默认的显示颜色（黑色）

第二个P使用了类选择器，所以优先采用类选择器的颜色（红色）

第三个P使用了ID和类两个选择器，由于ID选择器的优先级高于类选择器，所以颜色显示为蓝色

第四个P使用了行内选择器和ID选择器，由于行内选择器优先级高于ID选择器，所以颜色显示为黄色

第五个P同时使用了两个类选择器，浏览器在解释网页时以第一个类选择器定义的颜色为准，所以颜色显示为紫色

第六个P同时使用了两个ID选择器，但由于ID选择器只能同时用于一个标记且全局唯一，所以浏览器认为这是一个非法的，颜色以其默认值显示（黑色）

以上是详解CSS继承特性和层叠特性的详细内容。更多信息请关注PHP中文网其他相关文章！