html - 使用自动生成的数字的 CSS 继承

Question

我有这样的联系人列表:

 <div id=\"contact $name\"> 
  Contact 1.
 </div>

 <div id=\"contact $name\"> 
  Contact 2.
 </div>
...and so on

$name 是联系人的姓名。我需要这样做，因为我在某处使用 javascript 来显示/隐藏选定联系人的详细信息，所以我需要一个唯一的 ID。

我想给 id contact 添加一些样式。我不太习惯使用 CSS，但我认为在这种情况下应该存在继承的概念，对吗？

我尝试应用如下测试风格:

#contact { font-size:20px; color:red; }

这应该为所有具有 contact 的 id 应用样式，如果我想为联系人 1 使用一些特定的样式，我应该使用类似 #contact Contact 1 { bla bla bla } 的东西

问题是它不起作用。我在那里做错了什么？

编辑

 <script type="text/javascript" charset="utf-8">
  function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
             document.getElementById(elementid).style.display = '';
    } else {
            document.getElementById(elementid).style.display = 'none';
    }}</script>

Answer 1

在您的标记中同时使用 id 和类名可能更有意义，如下所示:

<div class="contact" id=\"$name\"> 
    Contact 1.
</div>

<div class="contact" id=\"$name\"> 
     Contact 2.
</div>

然后在您的 CSS 中按类名定位，例如:

.contact { font-size:20px; color:red; }

然后可以根据 id 应用覆盖，例如:

#contact-1 { color:blue; }

这样你就可以将你的 css 应用到所有联系人，并且仍然使用 javascript 按 id 显示/隐藏。