覆盖和重置 CSS 样式: 自动或不工作

我想覆盖下面为所有表定义的 CSS 样式:

table {
font-size: 12px;
width: 100%;
min-width: 400px;
display:inline-table;
}

我有具体的表与类称为 'other'。
最后，桌子的装饰应该是这样的:

table.other {
font-size: 12px;
}

所以我需要删除3个属性: width，min-width和 display

我尝试用 none或 auto重置，但没有用，我的意思是这些情况:

table.other {
width: auto;
min-width: auto;
display:auto;
}
table.other {
width: none;
min-width: none;
display:none;
}
290976 次浏览
小开

好的，display: none;根本不会显示表，请尝试使用宽度和最小宽度声明保持为‘ auto’的 display: inline-block;。

小开

“无”并不是你想的那样。为了“清除”CSS 属性，您必须将其设置回默认值，这是由 CSS 标准定义的。因此，您应该在您喜欢的引用中查找默认值。

table.other {
width: auto;
min-width: 0;
display:table;
}
小开
最佳答案

我相信第一组属性不起作用的原因是因为 display没有 auto值，所以应该忽略该属性。在这种情况下，inline-table仍然有效，而且由于 width不适用于 inline元素，因此这组属性将不会做任何事情。

第二组属性将简单地隐藏表，这就是 display: none的用途。

尝试将其重置为 table:

table.other {
width: auto;
min-width: 0;
display: table;
}

编辑: min-width默认为 0，而不是 auto

小开

表的默认 display属性是 display:table;。另外唯一有用的值是 inline-table。对于表元素，所有其他 display值都是无效的。

没有 auto选项可以将其重置为默认值，不过如果您使用的是 Javascript，则可以将其设置为空字符串，这样就可以实现这一功能。

width:auto;是有效的，但不是默认值。表的默认宽度是 100%，而 width:auto;将使元素只占用所需的宽度。

min-width:auto;是不允许的。如果设置 min-width，它必须有一个值，但是设置为零可能与将其重置为默认值一样好。

小开 
Set min-width: inherit /* Reset the min-width */

试试这个，会有用的。

小开

我最终使用 Javascript 来完善一切。

我的 JS 小提琴: https://jsfiddle.net/QEpJH/612/

HTML:

<div class="container">
<img src="http://placekitten.com/240/300">
</div>


<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">

CSS:

.container {
background-color:#000;
width:100px;
height:200px;


display:flex;
justify-content:center;
align-items:center;
overflow:hidden;


}

约翰逊:

$(".container").each(function(){
var divH = $(this).height()
var divW = $(this).width()
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();


if ( (imgW/imgH) < (divW/divH)) {
$(this).addClass("1");
var newW = $(this).width();
var newH = (newW/imgW) * imgH;
$(this).children("img").width(newW);
$(this).children("img").height(newH);
} else {
$(this).addClass("2");
var newH = $(this).height();
var newW = (newH/imgH) * imgW;
$(this).children("img").width(newW);
$(this).children("img").height(newH);
}
})
小开

我发现恢复最小宽度设置的最佳方法是:

min-width: 0;
min-width: unset;

Unset 在规范中，但是一些浏览器(IE10)不尊重它，所以0在 大部分情况下是一个很好的备份。 最小宽度: 0;

小开

我试过了:

width:0%

对我有用


提交答案