html - 可以将多个CSS ID添加到CSS？

我有一个包含三个div的html文件：

<div id="rooms"></div>
<div id="chatters"></div>
<div id="chat-console"></div>

我想为每种样式定义几种样式，而某些样式是相同的。因此，我创建了以下CSS：

#chatters, #rooms { width: 100px, margin: 0 1em 0 0; float: left; list-style: none; }
#chatters, #chat-console, #rooms { height: 300px; overflow: auto; padding: 1%;}
#chat-console, #chatters, #chat-form, #rooms input[type=text] { border: 1px solid #ccc; }

在第三条css行中，还有一个聊天表单div，但与该情况无关。

问题：我的rooms div没有获得第三个CSS规范中指定的边界线。尽管chat-console和chatters可以。

当我在浏览器中检查代码时，这就是rooms div的结果：

#chatters, #chat-console, #rooms {height: 300px; overflow: auto; padding: 1%;}
#chatters, #rooms { width: 100px; margin: 0px 1em 0px 0px; float: left; list-style: none outside none;}

但永远看不到设置

边界的#chat-console, #chatters, #chat-form, #rooms input[type=text] { border: 1px solid #ccc; }行。

虽然当我检查chatters和chat-c​​onsole div时我有css行#chat-console, #chatters, #chat-form, #rooms input[type=text] { border: 1px solid #ccc; }

为什么会这样呢？我将房间div设置为具有该css规则。为什么没有出现？
规则之前要添加的ID数量是否有限制，我超过了该数量，因此它停止工作了？

最佳答案

#rooms input[type=text] { border: 1px solid #ccc; }

不会为#rooms div设置边框，而是仅在#rooms div的子级输入中设置边框。

#chat-console, #chatters, #chat-form, #rooms { border: 1px solid #ccc; }

因为div的边界就是我想的那样。

要么

#chat-console, #chatters, #chat-form, #rooms, #rooms input[type=text] { border: 1px solid #ccc; }

如果要在div和输入上加上边框。

关于html - 可以将多个CSS ID添加到CSS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28326414/