代码

<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. Wordpress主题中常用代码总结

    1. 在 Wordpress主题中显示最热文章的 PHP代码 <?php $result = $wpdb->get_results("SELECT comment_count,I ...

  2. Ice_cream's world I--hdu2120

    Ice_cream's world I Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  3. poj 1050 To the Max_dp求最大子矩阵和

    题意:求最大子矩阵和 利用dp[i]每次向下更新,构成竖起的单条矩阵,再按不小于零就加起来来更新,构成更大的矩阵 #include <iostream> #include<cstdi ...

  4. LDA 资料整理

    LDA 中文名叫 隐含狄利克雷分布 有一个讲的数学八卦的pdf,如下: http://pan.baidu.com/s/1bnX6Pgb Latent Dirichlet Allocation(LDA) ...

  5. java反射 实例

    首先介绍几个概念: 1.Java反射的概念 反射含义:可以获取正在运行的Java对象. 2.Java反射的功能 1)可以判断运行时对象所属的类 2)可以判断运行时对象所具有的成员变量和方法 3)通过反 ...

  6. [IOS]UIWebView 请求网络页面或者加载本地资源页面

    UIWebView是一个能够显示网页的IOS视图控件,我们可以用它来访问一个网站.下面是具体的实例: 操作步骤: 1.首先在xib文件中拖放一个UIWebView控件到view中 2.将下载的页面以及 ...

  7. sysbench的安装与使用

    sysbench是一款开源的多线程性能测试工具,可以执行CPU/内存/线程/IO/数据库等方面的性能测试.数据库目前支持MySQL/Oracle/PostgreSQL 安装过程(rhel5.8+mys ...

  8. JQuery弹出窗口小插件ColorBox

    本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...

  9. ORACLE Recyclebin管理及flashback recyclebin中的对象

    Flashback用于恢复用户误删除的对象(包括表,索引等), 不支持sys用户. system表空间下的对象,也不能从回收站里拿到.故使用SYS 或者SYSTEM用户登陆时, show recycl ...

  10. 【floyd存字典序路径】【HDU1385】【Minimum Transport Cost】

    题目大意 求多组i到j的最短路径 并输出字典序最小.... 现在只会floyd的方式 利用dis[i][j] 表示i到j的路径中i 后面的节点 更新是比较dis[i][j] dis[i][k]. 记住 ...