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-stylesheet的有趣部分如下所示：

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

所以我只想让字母后面的颜色变成白色。这在Opera中非常有用，但是当在Chrome中观看网站时，背景只是标题背后的白色并且在“AAAAAA”后面，但不在列表的其他元素之后。这很令人困惑，因为它只在Chrome中不起作用。也许某人有解决这个问题的方法。谢谢！

Answer 1

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

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

Answer 2

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

另一方面，

class用于将元素组合在一起。例如：

<div class="indent">

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

.indent {
  foo: 'bar';
}

尝试使用class代替id，看看情况如何。

Chrome <span>背景色</span>

2 个答案: