html - 列表颜色未出现在 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。请改用类。

来自 The global structure of an HTML document :

The id attribute assigns a unique identifier to an element

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances

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

<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，. 为类。多个元素可以具有相同的类。您还想更改 li 的链接颜色，因此请在 CSS 中指定:

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