代码

<html>

<head>

    <title>继承关系</title>

    <style>

body{

    color:blue;                    /* 颜色 */

    text-decoration:underline;    /* 下划线 */

    }

em{

    color:red;                    /* 颜色 */

    }

</style>

</head>

<body>

    <h1><em>前沿</em>教室</h1>

    <p>欢迎来到前沿教室，这里为您提供丰富学习内容。</p>

    <ul>

        <li>在这里，你可以学习到：

            <ul>

                <li>HTML</li>

                <li>CSS

                <ul class="css">

                    <li>CSS初级</li>

                    <li>CSS中级</li>

                    <li>CSS高级</li>

                </ul>

                </li>

                <li>Javascript</li>

            </ul>

        </li>

        <li>你还可以学习到：

            <ol>

                <li>Flash</li>

                <li>Dreamweaver</li>

                <li>Photoshop</li>

            </ol>

        </li>

    </ul>

    <p>如果您有任何问题，欢迎联系我们</p>

</body>

</html>

说明：body下面的元素都继承了body的属性。然后em中的颜色属性又会被覆盖掉。

后代选择器

代码

<html>

<head>

    <title>继承关系</title>

    <style>

h1{

    color:blue;                    /* 颜色 */

    text-decoration:underline;    /* 下划线 */

    }

em{

    color:red;                    /* 颜色 */

    }

li li{

   color:green ;

   font-weight:bold;

}

</style>

</head>

<body>

    <h1><em>前沿</em>教室</h1>

    <p>欢迎来到前沿教室，这里为您提供丰富学习内容。</p>

    <ul>

        <li>在这里，你可以学习到：

            <ul>

                <li>HTML</li>

                <li>CSS

                <ul>

                    <li>CSS初级</li>

                    <li>CSS中级</li>

                    <li>CSS高级</li>

                </ul>

                </li>

                <li>Javascript</li>

            </ul>

        </li>

        <li>你还可以学习到：

            <ol>

                <li>Flash</li>

                <li>Dreamweaver</li>

                <li>Photoshop</li>

            </ol>

        </li>

    </ul>

    <p>如果您有任何问题，欢迎联系我们</p>

</body>

</html>

说明：li 下面的li会被添加绿色属性 包括孙子，曾孙子

css案例学习之继承关系的更多相关文章

  1. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  2. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  3. css案例学习之全局声明*{} 与body{}的区别

    代码 <html> <head> <title>全局声明</title> <style type="text/css"> ...

  4. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  5. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  6. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. css案例学习之按钮超链接

    效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...

  8. css案例学习之relative与absolute

    代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  9. css案例学习之float浮动

    代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

随机推荐

  1. yii中使用active record进行关联显示

    model中: view中:

  2. groovy 弹出菜单

    import groovy.swing.* import javax.swing.* import java.awt.* def swing = new SwingBuilder() swing.fr ...

  3. mysql 1054错误

    往数据库插入数据的时候报错,插入数据的是这样的 [SQL] insert into stock(code,name,b_price,s_price,num,rate,profit) values (1 ...

  4. CodeForces 214B Hometask

    本题求n个数组成的大数,要求是2,3,5的倍数. 因为是2 和5 的倍数,所以个位为 0:所以若n个数中没有0,直接输出-1: 难点就是要求为3 的倍数. 因为若某个数为3的倍数,则其各位数的和必然是 ...

  5. js中一些常用的基本函数

    如何使用jquery刷新当前页面下面介绍全页面刷新方法:有时候可能会用到window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于 ...

  6. Git学习03 －－远程仓库

    把本地库的内容推送到远程(github), 用git push命令,实际上是把当前分支master推送到远程. 由于远程库是空的,我们第一次推送master分支时,加上了-u参数,Git不但会把本地的 ...

  7. linux之SQL语句简明教程---DISTINCT

    SELECT 指令让我们能够读取表格中一个或数个栏位的所有资料.这将把所有的资料都抓出,无论资料值有无重复.在资料处理中,我们会经常碰到需要找出表格内的不同资料值的情况.换句话说,我们需要知道这个表格 ...

  8. 杭电oj 1009 FatMouse' Trade

    Tips:本题采用贪心算法,类似于背包问题,关键在于读入数据之后,将数据按 J[i]/F[i] 从大到小排列即可. /**本程序主要采用贪心算法思想,类似于背包问题*/ #include<std ...

  9. 【Java接口实现动态加载不同的类】

    public interface Person {       public double calcuMonthlySalary(double sal, int type);    }   publi ...

  10. hdu1588之经典矩阵乘法

    Gauss Fibonacci Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...