html - 有多少个 css id 可以添加到 css？

Question

我有一个包含三个 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分区:

#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; } 行为 div 设置边框的位置。

虽然当我检查聊天和聊天控制台 div 时，我有 css 行 #chat-console, #chatters, #chat-form, #rooms input[type=text] { border: 1px solid #ccc; }

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

Answer 1

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

不为#rooms div 设置边框，它仅在作为#rooms div 子级的input 上设置边框。

#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 上的边框和输入。