我知道类似的问题已经被问过很多次了,但我找不到我的具体问题的答案。如果我有一堆非常相似但只是不同的 CSS 选择器,我如何嵌套或分组它们。
这就是我正在尝试做的事情。
#cell-left {
background-color:#DDDDDD;
border:2px solid;
height:400px;
margin:20px 10px 0px 32px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#cell-center {
background-color:#DDDDDD;
border:2px solid;
height:400px;
margin:20px 10px 0px 10px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#cell-right {
background-color:#DDDDDD;
border:2px solid;
height:400px;
margin:20px 32px 0px 20px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#row {
width:100%;
margin-top:0px;
}
正如您所看到的,所有单元格彼此都很常见,只是边距略有不同。我知道有一种方法可以使所有单元格完全相同,然后在 CSS 中添加 .right、.center 和 .left 并仅保留边距,从而减少大量代码。
预先感谢您的回答。
最佳答案
创建一个包含重复属性的单元类,并将其添加到每个 DOM 元素。
CSS
.cell{
background-color:#DDDDDD;
border:2px solid;
height:400px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#cell-left{
margin:20px 10px 0px 32px;
}
#cell-center {
margin:20px 10px 0px 10px;
}
#cell-right {
margin:20px 32px 0px 20px;
}
HTML
<div id="cell-left" class="cell">Something</div>
<div id="cell-right" class="cell">Something</div>
<div id="cell-center" class="cell">Something</div>
关于html - 了解 CSS 分组/嵌套,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14131607/