CSS颜色属性不改变文字颜色？

时间：2014-08-12 14:54:12

标签： html css

就像它说的那样，颜色属性不会改变文本的颜色。

HTML：

<body>
  <header>
    <ul id="navbar">
      <li><a href="/home.html">Home</a></li>
      <li><a href="/money.html">Money</a></li>
      <li><a href="/sports.html">Sports</a></li>
    </ul>
  </header>
</body>

和CSS：

#navbar {
    list-style-type: none;
}

#navbar li {
    background-image: url(../images/bg-nav.c.gif);
    background-position: left top;
    color: white;
    float: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    height: 37px;
    text-align: center;
    text-decoration: none;
    width: 120px;
}

4 个答案:

答案 0 :(得分：5)

您已将颜色应用于<a>标记。找到以下更改

#navbar li a{
   color:#fff;
}

答案 1 :(得分：0)

您需要定位a内的锚点（li）元素。

尝试#navbar li a

答案 2 :(得分：0)

你必须改变

a:link {  }
a:visited {  }
a:hover { }
a:active {  }

如果您在网站上使用多个链接，可能需要参考导航栏

答案 3 :(得分：0)

LIVE DEMO

enter image description here 

#navbar {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

#navbar li {
    float: left;
    list-style-type: none; /*apply list-style to li*/
    text-align: center;/*here we are telling LI to `text-center` all child anchor */
}
#navbar a {
    background-image: url(https://d3ui957tjb5bqd.cloudfront.net/uploads/2013/05/firelight-logo-preview-1-f-560x372.png);
    background-position: left top;
    background-size:100% auto;
    background-repeat:no-repeat;
    color: white;
    text-decoration: none;
    padding: 20px 60px; /* use padding instead of width and height since you don't know how long the text will be */
}
相关问题
最新问题