Question

我有一段：

<body>
<div id="attachment_839" class="wp-caption aligncenter" style="width: 462px">
<p class="wp-caption-text">Pargraph text which is much wider than 270px</p>
</div>
<body>

和样式应用：

body{
    width:270px !important; 
}

问题是：

为什么这段太宽了？由于!important用于覆盖以前的设置和样式页面。

为了解决这个问题，我添加了以下代码：

.wp-caption-text {
     width: 270px ! important;
}

它已被证明并且有效，但为什么!important不会覆盖以前的宽度？我该怎么做才能找到可能的答案？

Answer 1

没有声明宽度的段落<p>占用父容器的整个宽度（因为默认为auto）。

在您定义宽度的情况下 - 它会突破父级。

DEMO

如果您从style="width: 462px"删除div，则不会再破坏布局

Answer 2

这个问题已经回答了，我只是在补充我的意见。

我尝试了有问题的代码，发现段宽为270px，div宽度为420px。所以没有使用！important。

完成覆盖

!imporatant只能覆盖外部样式，不能覆盖任何内联样式。在这种情况下，我们将div的宽度声明为内联样式。因此，如果我们在.wp-caption类声明中添加宽度并使用!important，则不会影响div的宽度。

为了验证宽度，我在段落和div中添加了边框。以下是定义的样式。

<style type="text/css">
body{
    width:270px !important; 
}
.wp-caption-text {
     width: 270px !important;
     border: 1px dotted green;
}
.wp-caption
{
    border: 1px dotted blue;
}
</style>

屏幕截图显示了段落宽度和div宽度。 enter image description here

为什么不这样！Imporant覆盖以前的设置

2 个答案: