zoukankan      html  css  js  c++  java
  • a标签不能继承父级的颜色

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .li{color: #25A725;}
                .li #a{color: #25A725;}
            </style>
        </head>
        <body>
            <ul>
                <li id="li1">li1</li>
                <li id="li12">li12</li>
                <li id="li11">li11</li>
                <li id="li13" class="li"><span>li13</span></li>
                <li id="li15" class="li"><a href="#">li15</a> </li>
                <li id="li15" class="li"><a href="#" id="a">li17</a> </li>
                <li id="li18">li18</li>
            </ul>
        </body>
    </html>

    因为a标签不能继承样式,所以

    .li #a{color: #25A725;}重新设置
    1、结论:由于CSS的层叠(cascading),a元素继承自li的样式(color:#
    25A725)被浏览器的a元素的默认样式给覆盖了。
    2、理由:
    看图:
    图一:

    图二:

    由以上两个图可以知道:
    1、浏览器本身对a元素有默认样式(user agent stylesheet)(图二),对span元素没有默认样式(图一)
    2、由于CSS的层叠,a元素red颜色继承自div(Inherited from div)被划掉了(图二)。
    3、涉及到的知识点:
    
    
  • 相关阅读:
    HDU 4350 Card
    HDU 4287 Intelligent IME
    POJ Stars
    字符串处理
    NYOJ 63 小猴子下落
    在 DataGrid 控件中显示 SQL Server 数据库中的数据
    Linq to sql学习之查询句法
    SqlMethods
    SQLSERVER 2008 R2中的全文检索
    分享学习网站大全
  • 原文地址:https://www.cnblogs.com/tpfOfBlog/p/6297803.html
Copyright © 2011-2022 走看看