首先,不要使用暗示视觉意图的名称来标记您的 CSS 类,例如“minheightstyle”。CSS 背后的部分想法是分离内容和样式,这是一个经过验证的好处,您可以尝试使用您显示的类名来使其无效。所以,这是你的第一条经验法则——如果你想标记一个元素,你不要仅仅为了样式而标记它,你标记它是从元素与其他元素在其内容方面的不同之处获取线索。例如,对于您的三个div
s,如果都相似,那么应该可以选择它们作为其父级的子级,例如:
#parent > div {
min-height: 300px;
}
如果其中一个是选定的菜单项(例如),您可以给它“selected”类并相应地设置它的样式:
.selected {
min-height: 300px; }
一般来说,在设计选择器时尽量考虑结构,而不是考虑风格。这可能是您将放弃的一条建议,采取更简单的措施,但我向您保证,如果您今天认真对待网页设计,这是您可以做出的最佳投资。内容和样式的分离是绝对必要的,不仅在今天的 HTML 和 CSS 中,它在其他领域也很重要。
其次,您应该记住,您编写的规则是由浏览器盲目应用的——即最终被您用样式表覆盖的元素,必须根据 CSS 规范重新计算其样式。也就是说,如果您(例如)决定使用以下选择器覆盖所有元素的样式:
* {
margin: 0; padding: 0; }
..因为你决定你已经厌倦了浏览器之间应用他们自己的小边距和内边距之间的小不一致,并且你希望对页面上的边距和内边距进行严格控制,那么你应该知道浏览器将绑定上面的规则(要么立即计算样式,要么将其推迟到以后)到您拥有的每个元素。知道了这一点,您应该推断将上述规则应用于某些元素是否是一个更好的主意。同样的推理通常适用于背景图像 - 将背景颜色应用于元素的子元素还是简单地应用于元素本身更好(结果通常在视觉上无法区分)?
<div id="menu">
<div>Apples</div>
<div>Oranges</div>
<div>Bananas</div>
</div>
#menu > div {
background-color: brown;
}
或者
#menu {
background-color: brown;
}
至于您的直接问题,一个好的经验法则是最小化代码,包括标记和样式。摆脱孩子的相同类名,CSS 完全有能力选择这些没有类名:
<div id="foo">
<div>my text in red bg</div>
<div>my text in blue bg</div>
<div>my text in grey bg</div>
</div>
#foo > div
{
min-height: 300px;
float: left;
}
#foo > div:nth-child(1)
{
color: red;
}
#foo > div:nth-child(2)
{
color: green;
}
#foo > div:nth-child(3)
{
color: blue;
}
当然,上面还有其他选择东西的方法,但只是尝试应用CSS如何真正工作的知识。从细节中抽象是一件好事,但优化需要了解所述细节。在设计标记时尽量不要考虑样式 - 键入它,好像作者(您的)样式将始终被禁用,或者键入它以标记元素并考虑内容。然后应用 CSS,复习(通常需要“包装器”,但如今 Web 开发人员的生活就是这样),然后重复。但是尽量保持内容和风格分开——改变一个应该对另一个影响最小。