Question

我试图将页脚字体颜色设置为不同（使用选择器页脚.footer-left），但颜色会被选择器导航器覆盖。第一个选择器的特异性为11，第二个选择器的特性为4。为什么不起作用？我尝试了！重要和内联风格，但它没有用。我认为内联和重要总是会赢。我哪里错了？

HTML：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Google</title>
        <link rel = "stylesheet" href = "style.css">
    </head>

    <body>
       <header>
            <nav>
                    <ul>
                            <li><a href = "#">Gmail</a></li>
                            <li><a href = "#">Images</a></li>
                            <li><a href = "#">App</a></li>
                            <li><a href = "#">Signin</a></li>
                    </ul>
            </nav>
        </header>


        <div id = 'container'>
            <h1 id = 'logo'>Google</h1>
            <form>

            <input type = "text">
            <input type = "submit" value = "Google Search">
            <input type = "submit" value = "I'm Feeling Lucky"> 

            </form>
        </div>

        <footer >     

            <p>India</p>      
            <nav>
                <ul class = "footer-left">
                    <li><a href = "#">Adverstising</a></li>
                    <li><a href = "#">Business</a></li>
                    <li><a href = "#">About</a></li>
                </ul>

                 <ul class = "footer-right">  
                    <li><a href = "#">Privacy</a></li>
                    <li><a href = "#">Terms</a></li>
                    <li><a href = "#">Settings</a></li>
                    <li><a href = "#">Use Google.com</a></li>
                </ul>
            </nav>    
        </footer>


    </body>
    </html>

CSS is :

    * {
        margin:0;
        padding:0;
        box-sizing :border-box;
    }

    body{
        font-family : arial ,san-serif;
        font-size:13px;
    }
    #logo {
        background: url('/img/googlelogo_color_272x92dp.png') top left no-repeat;
        width:269px;
        height:95px;
        text-indent:-9999px;
        margin : 0 auto;

    }

    #container {
        width: 590px;
        margin :140px auto 30px ;
        text-align:center;

    }

    input[type = "text"]{
        width: 590px; 
        padding : 7px;   
        margin:30px 0 ;
        border : solid 1px #eee;
    }

    input[type = "text"]:hover {   
        border : solid 1px #aaa;   
    }

    input[type="submit"] {
        background: #f2f2f2;
        padding:10px;
        font-size:13px;
        border: solid 1px #ccc;
        border-radius:2px;
        color:#757575;
        border-radius :2px;
        fvont-weight:bold;

    }
    input[type="submit"]:hover {

        border : solid 1px #aaa;
        cursor:pointer;
    }

     header nav {

        text-align: right;
        margin:25px;
    }

    nav ul li {
        display: inline;
        padding:7px;

    }
      header nav ul li a {
        text-decoration:none;
         color:black;
    }

    footer {

        background:#f2f2f2;
        position : fixed ;
        bottom:0;
        width : 100%;
        font-size:15px;
        color:rgba(0,0,0,.5);
        margin:60px 0 0 0;
    }

    footer p {

        padding : 5px;
        border-bottom: solid 2px #eee;
        margin:5px;   

    }

    footer .footer-left {
        float : left;
        padding: 5px;
    }
    footer .footer-right {
        float : right;
        padding: 5px;
    }

Answer 1

这不是所有的css都不是。基于当前的例子，我猜这将解决它：

footer .footer-left {
  float : left;
  padding: 5px;
  color: red;
}

footer .footer-left a {
  color: inherit;
}

我不得不说你的css结构是一种混乱。所以也许重新编码就好了。

Answer 2

您必须指定要将颜色更改为哪个部分。如果您需要黑色链接：

footer a {
  color: black;
}

现在您只需指定页脚的整体颜色。而且我可以看到，“印度”继承了这一点，但链接是完全不同的故事。您需要为它们指定颜色，否则浏览器将使用它们的默认值。

在此处查看此示例：

https://jsfiddle.net/zeu773zp/

字体颜色不适用

2 个答案: