Question

在下面的代码颜色的文字是黑色但显示白色。它显示为这样

主页|服务

这些颜色的文字显示为白色，但我给了黑色。我在哪里弄错了？

#locations {
  width: 1050px;
  margin: 0 auto 0 auto;
}
#locations h1 {
  margin: 0 auto 0 auto;
  color: black;
  font-size: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#locations1 table {
  width: 1050px;
  height: 200px;
  color: white;
}
.hospitails {
  background-color: #A52A2A;
  font-size: 20px;
}
.hospitails_loc ul {
  width: 1050px;
  margin: 1px auto 0 auto;
  height: 50px;
  float: relative;
  color: black;
}
.hospitails_loc ul li {
  position: relative;
  list-style-type: none;
  display: inline;
  color: black;
}
.hospitails_loc li:before {
  content: " | ";
}
.hospitails_loc li:first-child:before {
  content: none;
}

<div id="locations">
  <h1>Locations</h1>
  <locations1>
    <table cellpadding="0" cellspacing="0" border="0">
      <tr class="hospitails">
        <td>Hospitails</td>
        <td>Clinics</td>
        <td>Home Care</td>
        <td>Information Centers</td>
      </tr>
    </table>
    <div class="hospitails_loc">
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Service</a>
        </li>
      </ul>
    </div>

    <locations1>
</div>

Answer 1

因为#locations1 table选择器说它是白色的？

Answer 2

不知怎的，我不明白这个问题，但我看到了问题和解决方案。您使用的某种自定义标记<locations1>应该更像<div id="locations1">。

您的代码：http://jsfiddle.net/8e3tcut9/

修改：http://jsfiddle.net/8e3tcut9/1/

Answer 3

默认情况下，链接在所有浏览器中都会显示为：

未访问的链接带有下划线和蓝色访问链接带有下划线和紫色活动链接带下划线且为红色您可以使用样式更改默认值：

添加此CSS：

.hospitails_loc ul li a{color:black;}

FIDDLE

文字颜色在html中没有变化

3 个答案: