我有一个包含三个 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 数量是否有限制,我超过了这个数量所以它停止工作?
最佳答案
#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 上的边框和输入。
关于html - 有多少个 css id 可以添加到 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28326414/