• css案例学习之继承关系


    代码

    <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会被添加绿色属性 包括孙子,曾孙子

  • 相关阅读:
    在rhel6上安装Python 2.7和Python 3.3
    RHEL7 -- Linux搭建FTP虚拟用户
    RHCE7 -- IPv6
    RHEL7 -- nmcli的使用
    设置Adobe Reader打开PDF文件保持记忆功能
    iptalbes -F
    服务器IP地址后修改SQL Server配置
    配置SELINUX
    11G新特性 -- 分区表和增量统计信息
    11G新特性 -- Statistics Preferences
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/4987392.html
Copyright © 2020-2023  润新知