覆蓋！重要的寬度屬性？

我有一些外部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

覆蓋！重要的寬度屬性？

回答

相關問題