html - 多个 CSS 类只有一个不同的属性?

标签 html css

<分区>

这个问题很简单,就是不知道怎么在网上搜索。

我有三个 CSS 类:.header.cell.footer。它们如下所示:

.header
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:20px; 
    background-color: Yellow; 
    border: 1px solid silver;
}
.cell
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:85px; 
    background-color: Yellow; 
    border: 1px solid silver;
}
.footer
{
    display:table-cell; 
    vertical-align:middle; 
    width:130px;
    height:40px; 
    background-color: Yellow; 
    border: 1px solid silver;
}

所有这些类之间的唯一区别是 height 属性。我怎样才能简化这段代码?

谢谢。

最佳答案

使用,分隔公共(public)属性的选择器列表中的元素:

.foo, .bar {
   color: red;
}

.foo {
   font-size: 120%;
}

.bar {
   font-size: 80%;
}

这将使 .foo.bar 都变成红色,但文本大小不同。

关于html - 多个 CSS 类只有一个不同的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38511952/

相关文章:

html - CSS3 动画在帧之间设置停止延迟

html - flex 容器内的每个 flex 元素在增长/收缩时是否可以有不同的过渡时间?

html - css 边框会完全改变 div 大小吗?

html - 在不使用 jquery -> www.mohitarya.co.nf 的情况下加载页面时需要动画开始

javascript - 使用多个按钮触发同一个弹出框

html - 工具提示最小高度有效但最小宽度无效

javascript - AngularJS - 在更新字段后在 ng-repeat 中查找对象

javascript - seekTo、playVideo 和 pauseVideo 函数在 YouTube Player API 中不起作用

html - CSS 悬停效果只适用于绝对定位?

html - 如何在另一个div前面获取一个div的子元素?