0

我写了这段代码：

CSS：

#header {
    margin: 0;
    background:gray;
}

#tabs {
    color:yellow;
    font-weight: bolder;
    display:inline;
}

HTML：

<div id="header"> 
     <h1>Tabs</h1>
     <ul id="tabs">
         <li id="tabs"><a href="#">This</a></li>
         <li id="tabs"><a href="#">That</a></li>
         <li id="tabs"><a href="#">The Other</a></li>
         <li id="tabs"><a href="#">Banana</a></li>
    </ul>
</div>

但是黄色字体颜色并未应用于li项目。为什么会这样？我应该如何编写这段代码以获得正确的输出？

4

4 回答 4

6

如果您有多个具有相同 ID 的元素，它通常只适用于第一个。元素应该有唯一的 ID。改用类。

来自HTML 文档的全局结构：

id 属性为元素分配唯一标识符

另一方面，class 属性将一个或多个类名分配给一个元素；该元素可以说属于这些类。一个类名可以由多个元素实例共享

所以你的代码应该是这样的：

<li class="tabs"><a href="#">This</a></li>
<li class="tabs"><a href="#">That</a></li>
<li class="tabs"><a href="#">The Other</a></li>
<li class="tabs"><a href="#">Banana</a></li>

#为身份证，.为班级。多个元素可以具有相同的类。您还想更改lis 的链接颜色，因此在 CSS 中指定：

.tabs a
{
 color:yellow;
 font-weight: bolder;
 display:inline;
}
于 2012-08-03T15:06:21.213 回答
4

因为文本在链接内。您需要指定标签内链接的颜色，如下所示：

#tabs a{color:yellow}

让它工作。

另外，不要两次使用相同的 id。如果您使用我提供的代码，您可以从 teh lis 中删除 id。

于 2012-08-03T15:05:44.967 回答
2

您的a标签可能优先。将其设置为继承其颜色：

#tabs {
    color: yellow;
}
#tabs a {
    color: inherit;
}

您可能还想设置text-decoration: none;.

于 2012-08-03T15:05:30.703 回答
2

首先，您需要将 id 从<li>. ID 是唯一的。

您的实际问题是您没有针对链接本身：

#tabs a {
    color: yellow;
}

这将允许您将样式应用于链接而不是<ul>

于 2012-08-03T15:05:35.777 回答