Question

我写了这段代码：

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项目。为什么会这样？我应该如何编写此代码以获得正确的输出？

Answer 1

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

来自The global structure of an HTML document：

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>

ID为{p> #，课程为.。多个元素可以具有相同的类。您还想更改li的链接颜色，以便在CSS中指定：

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

Answer 2

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

#tabs a{color:yellow}

让它发挥作用。

另外，请勿两次使用相同的ID。如果您使用我提供的代码，您可以从中删除ID。

Answer 3

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

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

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

Answer 4

对于开始，你需要从<li>取出id。 ID是独一无二的。

你真正的问题是你没有自己定位链接：

#tabs a {
    color: yellow;
}

这样您就可以将样式应用于链接而不是<ul>

列表颜色不在CSS中

4 个答案: