页脚和非应用CSS查询

时间：2017-10-17 06:37:27

标签： html css svg

目前的HTML和CSS如下：

＆＃13;
＆＃13; 
/* START footer CSS */

footer {
    position: relative;
    border-top: solid 1px rgba(255,255,255,.2);
}


/* Footernav-wrapper CSS ---------------------*/

#WebsiteFooterNav.Footernav-wrapper {
    display: flex;
    max-width: 1170px;
    flex-direction: column;
    padding: 20px 0;
    background-color: #000;
    margin: 0 auto;
}

/*  END Footernav-wrapper CSS ---------------------*/

/* Footernav-svg-icons CSS ---------------------*/

#WebsiteFooterNav .Footernav-svg-icons {
    width: 0;
    height: 0;
    display: none;
    visibility: hidden;
}

/* END Footernav-svg-icons CSS ---------------------*/


/* Footernav CSS ---------------------*/

#WebsiteFooterNav .Footernav {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

/*  END Footernav CSS ---------------------*/

/* Footernav-products CSS ---------------------*/

#WebsiteFooterNav .Footernav-menu+.Footernav-products {
    margin-top: 20px;
    border-top-width: 1px;
}

#WebsiteFooterNav.Footernav-wrapper ul {
    list-style: none;
}

#WebsiteFooterNav .Footernav-products {
    display: flex;
    min-height: 60px;
    margin: 20px;
    padding: 10px 0;
    border-style: solid;
    border-color: #333;
    border-width: 1px 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* END Footernav-products CSS ---------------------*/

/* Footernav-product CSS ---------------------*/

#WebsiteFooterNav .Footernav-product {
    padding: 10px;

/* END Footernav-product CSS ---------------------*/

/* Footernav-product-link CSS ---------------------*/

#WebsiteFooterNav .Footernav-wrapper a {
    text-decoration: none;
}

#WebsiteFooterNav .Footernav-product-link {
    display: flex;
    align-items: center;
    color: #999;
    fill: #999;
    font-size: 12px;
    transition: color .1s ease,fill .1s ease;
}

#WebsiteFooterNav .Footernav-product-link:hover {
    color: #fff;
    fill: #fff;
}

/* END Footernav-product-link CSS ---------------------*/

/* Footernav-product-icon CSS ---------------------*/

#WebsiteFooterNav .Footernav-product-icon {
    width: 20px;
    height: 20px;
    margin: 0 7px;
}

/* END Footernav-product-icon CSS ---------------------*/

/* Footernav-product-icon svg CSS ---------------------*/

#WebsiteFooterNav .Footernav-product-icon svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
    fill: inherit;
}

/* END Footernav-product-icon svg CSS ---------------------*/


/* END Footernav-product-icon svg CSS ---------------------*/

/* Footernav-product-name CSS ---------------------*/

#WebsiteFooterNav .Footernav-product-name {
    display: flex;
    align-items: center;
    color: #999;
    fill: #999;
    font-size: 13px;
    transition: color .1s ease,fill .1s ease;
}

#WebsiteFooterNav .Footernav-product-name:hover {
    color: #fff;
    fill: #fff;
}

/* END Footernav-product-name CSS ---------------------*/

/* Footernav-misc CSS ---------------------*/

#WebsiteFooterNav .Footernav-misc {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* END Footernav-misc CSS ---------------------*/

/* Footernav-region CSS ---------------------*/

#WebsiteFooterNav.Footernav-wrapper a{
    text-decoration: none;
}

#WebsiteFooterNav .Footernav-region {
    padding: 5px 20px 0 0;
    display: flex;
    align-items: center;
    color: #999;
    fill: #999;
    font-size: 11px;
    line-height: 1;
    transition: color .1s ease,fill .1s ease;
    cursor: pointer;
    overflow: hidden;
}

/* END Footernav-region CSS ---------------------*/

/* Footernav-region-icon CSS ---------------------*/

#WebsiteFooterNav .Footernav-region-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* END Footernav-region-icon CSS ---------------------*/

/* Footernav-region-icon svg CSS ---------------------*/

#WebsiteFooterNav .Footernav-region-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: inherit;
}

/* END Footernav-region-icon svg CSS ---------------------*/

/* Footernav-disclaimers CSS ---------------------*/

#WebsiteFooterNav.Footernav-wrapper ul {
    list-style: none;
}

#WebsiteFooterNav .Footernav-disclaimers {
    padding: 5px 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    color: #999;
}

/* Footernav-disclaimer CSS ---------------------*/

#WebsiteFooterNav .Footernav-disclaimer {
    padding: 5px 0;
    color: inherit;
}

/* END Footernav-disclaimer CSS ---------------------*/

/* Footernav-disclaimer:after CSS ---------------------*/

#WebsiteFooterNav .Footernav-disclaimer:after {
    margin: 0 8px;
    content: '/';
}

/* END Footernav-disclaimer:after CSS ---------------------*/

/* Footernav-disclaimer:nth-last-child CSS ---------------------*/

#WebsiteFooterNav .Footernav-disclaimers .Footernav-disclaimer:nth-last-child(2):after {
    display: none;
}

/* END Footernav-disclaimer:nth-last-child CSS ---------------------*/

/* Footernav-disclaimer-link CSS ---------------------*/

#WebsiteFooterNav .Footernav-disclaimer-link {
    color: inherit;
    transition: color .1s ease,fill .1s ease;
}

/* END Footernav-disclaimer-link CSS ---------------------*/

/* END footer CSS */
＆＃13; 
<!-- START footer HTML -->

<div>
    <footer id="WebsiteFooterNav" class="Footernav-wrapper">
    <svg class="Footernav-svg-icons" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <g id="Footernav-icon-github">
   <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
   <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
   <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
            </g>
            <g id="Footernav-icon-archive">
   <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
   <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
   <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
            </g>
            <g id="Footernav-icon-music">
 <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
   <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
   <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
            </g>
            <g id="Footernav-icon-download">
 <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
   <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
   <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
            </g>
            <g id="Footernav-icon-language">
 <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
   <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
   <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
            </g>
        </defs>
    </svg>

<div class="Footernav">
        <ul class="Footernav-products">
            <li class="Footernav-product" id="xxxxxxxx">
                <a href="LINK HERE" class="Footernav-product-link">
                    <span class="Footernav-product-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
                            <use xlink:href="#Footernav-icon-github"></use>
                        </svg>
                    </span>
                    <span class="Footernav-product-name">Product 1</span>
                </a>
            </li>
        
            <li class="Footernav-product" id="xxxxxxxx">
                <a href="LINK HERE" class="Footernav-product-link">
                    <span class="Footernav-product-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
                            <use xlink:href="#Footernav-icon-archive"></use>
                        </svg>
                    </span>
                    <span class="Footernav-product-name">Product 2</span>
                </a>
            </li>
        
            <li class="Footernav-product" id="xxxxxxxx">
                <a href="LINK HERE" class="Footernav-product-link">
                    <span class="Footernav-product-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
                            <use xlink:href="#Footernav-icon-music"></use>
                        </svg>
                    </span>
                    <span class="Footernav-product-name">Product 3</span>
                </a>
            </li>
        
            <li class="Footernav-product" id="xxxxxxxx">
                <a href="LINK HERE" class="Footernav-product-link">
                    <span class="Footernav-product-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
                            <use xlink:href="#Footernav-icon-download"></use>
                        </svg>
                    </span>
                    <span class="Footernav-product-name">Product 4</span>
                </a>
            </li>
        </ul>
        <!-- if "is-small" is set on page config, return only Footernav-misc-->
        <div class="Footernav-misc">
            <a href="#" class="Footernav-region">
                <div class="Footernav-region-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" focusable="false">
                        <use xlink:href="#Footernav-icon-language"></use>
                    </svg>
                </div>
                <div class="Footernav-region-text">Change Language</div>
            </a>
            <ul class="Footernav-disclaimers">
                <li class="Footernav-disclaimer">Copyright © 2017 -websitename-. All rights reserved.
                </li>
                <li class="Footernav-disclaimer" id="Globalnav.copyright.Privacy">
                    <a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Privacy</a>
                </li>
                <li class="Footernav-disclaimer" id="Globalnav.copyright.Terms_of_Use">
                    <a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Terms of Use</a>
                </li>
                <li class="Footernav-disclaimer" id="Globalnav.copyright.Cookies">
                    <a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Cookies</a>
                </li>
            </ul>
        </div>
    </div>
</footer>

</div>
＆＃13;
＆＃13;
＆＃13;

目标模型https://i.stack.imgur.com/tJhbk.png（导航列已被修剪）

  1. ＆＃34;产品＆＃34;链接内联SVG不符合他们的指定 20px边界尺寸
  2. 关于＆＃34;产品＆＃34;的继承问题 链接和相关的风格css。
  3. 语言SVG大小不正确

    4. #WebsiteFooterNav .Footernav-product-link {}以及不适用的CSS是问题所在，我确实相信，但不知道原因。

    如果另一张海报可能会有些亮点

1 个答案:

答案 0 :(得分：0)

你缺少CSS中的右括号。

/* Footernav-product CSS ---------------------*/

#WebsiteFooterNav .Footernav-product {
    padding: 10px;

/* END Footernav-product CSS ---------------------*/

如果你插入缺少的大括号，你的CSS效果会好很多。

相关问题
最新问题