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和classname可能更有意义，如下所示：

<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显示/隐藏。

Answer 2

这应该适用于所有有联系人ID的风格

对于单个联系人，ID应该是唯一的。如果您想要将某些内容应用于多个联系人，则应使用类：

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

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

然后你可以通过以下方式申请：

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

如果要将其他独特样式应用于某些联系人，您应该了解css选择器的工作方式： CSS Selectors Reference - w3schools

（例如，您可以为奇数或偶数子项添加样式）

使用自动生成的数字进行CSS继承

2 个答案: