Chrome<跨度>背景颜色

Question

我的 Chrome 有问题。我创建了一个网站，html 代码如下所示：

<div id="Content"> 
<h1><span id="back-color">Heading</span></h1> 
<p><span id="back-color">bla bla bla:</span></p> 
  <ul id="bild-liste"> 
    <li><span id="back-color"><a href="?section=Bilder&ID=1">AAAAAA</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=2">BBBBBB</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=3">CCCCCC</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=4">DDDDDD</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=5">EEEEEE</span></li> 
  </ul> 
</div>

我的 css 样式表的有趣部分如下所示：

#back-color
{
      background-color: white;
}

所以我只想字母后面的颜色为白色。这在 Opera 中效果很好，但在 Chrome 中观看网站时，背景仅在标题后面和“AAAAAA”后面是白色的，而不是在列表的其他元素后面。这很令人困惑，因为它只在 Chrome 中不起作用。也许有人有解决这个问题的方法。谢谢！

Answer 1

一个 ID 只能在网站上使用一次。使用 css 类

（将 id="back-color" 替换为 class="back-color" 并在 css-stylesheet 中使用 .back-color 而不是 #back-color

Answer 2

id 用于引用唯一元素，因此多次使用它会产生意外的结果。

另一方面，class 用于将元素分组在一起。例如：

<div class="indent">

您可以有多个共享一个类的元素。引用类的 CSS 选择器是这样的：

.indent {
  foo: 'bar';
}

尝试使用 class 而不是 id 并查看其工作原理。