从元素中删除特定样式 属性

Removing a specific style property from element

我的页面中有一个 div 从我公司的自定义 CSS 文件中获取样式。其中一些样式弄乱了我的 div 是 displayed/positioned 的方式。我追踪到它是 display: inline-block;.

使用 Chrome 开发人员工具的元素选项卡,当我取消选择此特定行时,我的元素正确显示:

所以我想我会覆盖 属性 以显示默认值 display: inline !important; 来模拟 "removing" 和 属性。 属性 被覆盖,但我的元素仍然未对齐。

我还尝试在加载元素后使用 jQuery:$('#myelement').css('display', 'X'); 其中 X 是显示 属性 的任何可接受值。我也尝试了一个空 space。 None 提供了取消选中(删除?)Chrome 开发人员工具中的 属性 的结果。

那么我还剩下哪些选项来模拟在 Chrome 开发工具的元素选项卡中取消选中样式 属性?我假设最接近的事情是以某种方式从我的元素中删除 属性,但我不确定如何执行此操作,因为此 属性 是在外部 CSS 文件中定义的我不允许修改。

"The default display mode for a div is block. So maybe display:block !important;?" - 加里·斯托里

(答案作为实际答案给出,因此 post 可以标记为已回答。)

div 的默认 display 值为 block。所以你应该将值设置为:

div { display:block; }

如果由于某种原因不起作用,您可以尝试通过添加额外的元素来增加特异性来覆盖。例如:

/*specificity value of 2 */
body div { display: block; }

/* or specificity value of 11 */
.content div {display: block; }

 /* or specificity value of 101 */
 #content div

这增加了选择器的特殊性,允许您覆盖当前值而不致于以后无法覆盖。可以找到更多信息 in this article, and this site.

如果上述 none 不起作用,则仅使用 !important!important 应该永远是最后的选择!只有另一个 !important 可以通过导致真正糟糕的代码来覆盖自己。

要了解有关元素 initial/default 值的更多信息,您可以参考 this article