覆盖！重要的宽度属性？

我有一些外部CSS样式，其中一人会将此规则：覆盖！重要的宽度属性？

svg { 
    width: 100% !important 
}

这似乎超越我width属性（在Chrome DevTools检查时）。问题是它覆盖了javascript插件（Leaflet）生成的div元素的宽度，该插件扩展了给定的div，使其具有一个元素（一个svg元素，其中包含3行）。

<svg class="leaflet-zoom-animated" width="1442" height="728" viewBox="-722 -364 1442 728" style="transform: translate3d(-722px, -364px, 0px);"> 
    <g> 
     <path stroke-linejoin="round" stroke-linecap="round" pointer-events="none" stroke="green" stroke-opacity="1" stroke-width="5" fill="none" d="M-584 -109L-252 64"></path> 
    </g> 
    <g> 
     <path stroke-linejoin="round" stroke-linecap="round" pointer-events="none" stroke="green" stroke-opacity="1" stroke-width="5" fill="none" d="M-222 167L-252 64"></path> 
    </g> 
    <g> 
     <path stroke-linejoin="round" stroke-linecap="round" pointer-events="none" stroke="green" stroke-opacity="1" stroke-width="5" fill="none" d="M34 -338L-252 64"></path> 
    </g> 
</svg>

是需要的宽度以显示单张地图，目前看来崩溃由0像素为0px（父节点不具有任一尺寸，这是细虽然）。

有没有什么方法可以确保元素仍然获得由Leaflet插件设置的宽度，并且它没有被覆盖？

来源

2014-12-05 user717572

没办法。 “重要”的优先级甚至高于内联风格。 – Leo 2014-12-05 07:39:33

@LeoDeng - 不能比'！important'更高的内联样式 – Anthony 2014-12-05 07:40:06

您提供的样式规则不会覆盖其他div的宽度，尤其是因为它不是svg的子元素。 div可能正在崩溃，因为它里面没有内容。 – Anthony 2014-12-05 07:45:13

滑稽的是，我们可以让Chrome，Opera和Firefox的宽度设置为auto尊重width属性与更具体的选择器。不是Internet Explorer。

正如在评论中指出的那样，!important具有最高的特异性，它只能被更具体的!important覆盖。在这种情况下，你可以像这样设置宽度为auto到具有leaflet部分在类名中的SVG元素，例如：

svg[class|=leaflet] { 
    width: auto !important; 
}

，如果你之前或之后添加此规则，这其实并不重要那个外部的css文件。两者都可以工作。

您可以在Chris's post或其他地方找到更多关于属性选择器的信息。

虽然没有IE支持！我不确定谁在这种情况下行事，但事实依然存在。现场可以看到一个实例：http://jsfiddle.net/skip405/na4sdxnk/

来源

2014-12-05 08:29:23 skip405

这很好（至少在Chrome上）。我意识到它可以被更具体的规则覆盖，但将其设置为auto是使浏览器再次遵守原始属性'width'的关键步骤！ – user717572 2014-12-05 09:57:46

我想我的问题是correct.can，我们在div容器内添加svg，并赋予该svg一个属性与！important.With，它将覆盖应用globallay并监听特定于svg里面的div。

http://jsfiddle.net/hw60vs5a/

svg{ 
    background-color:lightgrey !important; 
    width:100% !important; 
} 

div svg{ 
    background-color:lightblue !important; 
    width:auto !important; 
}

注：我不是太了解的SVG是如何工作的

来源

2014-12-05 07:54:54 codebot

覆盖！重要的宽度属性？

回答

相关问题