列表颜色不在CSS中

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.请改用类.

来自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>

#用于ID,.用于课程.多个元素可以具有相同的类.您还想更改lis 的链接颜色,以便在CSS中指定:

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