传单地图集成：传单的CSS被网站的CSS文件覆盖？

我想为我的网站添加一个Leaflet地图。不幸的是，我自己的CSS文件似乎在某些元素上覆盖了Leaflet的CSS文件。传单地图集成：传单的CSS被网站的CSS文件覆盖？

地图的缩放按钮应该是这样的：

但他们现在这个样子在我的主页：

我不知道这是我自己的CSS文件覆盖Leaflet中的CSS。但是，我怎么能阻止呢？看看我的#content a。看起来像缩放按钮被解释为一个链接，所以从我的文件中获取CSS属性。

body { 
 
\t background-color: #EFEFEF; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#wrapper { 
 
\t width: 1000px; 
 
\t padding: 0; 
 
\t margin: 0 auto; 
 
} 
 

 
#content { 
 
\t background-color: #FFFFFF; 
 
\t width: 700px; 
 
\t float: left; 
 
\t padding: 0 2.5em 0 2.5em; 
 
\t margin: 0; 
 
} 
 

 
#content p, ol, ul { 
 
\t font-family: "Open Sans Condensed", sans-serif; 
 
\t color: #444444; 
 
} 
 

 
#content a:link, #content a:visited { 
 
\t color: #C09100; 
 
\t text-decoration: none; 
 
} 
 

 
#content a:hover, #content a:active { 
 
\t color: #C09100; 
 
\t text-decoration: underline; 
 
} 
 

 
#map { 
 
\t height: 400px; 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
} 
 

 
strong { 
 
\t color: #444444; 
 
\t font-size: 100%; 
 
\t font-weight: bold; 
 
} 
 

 
h1 { 
 
\t color: #444444; 
 
\t font: 3em "Amatic SC"; 
 
\t text-align: center; 
 
} 
 

 
h2 { 
 
\t color: #444444; 
 
\t font: 2em "Amatic SC"; 
 
\t text-align: center; 
 
}

<html> 
 
<head> 
 
    <!-- Link to Leaflet's CSS file: --> 
 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
 
    <!-- My own CSS file: --> 
 
    <link rel="stylesheet" type="text/css" href="rumkommenstyle.css" /> 
 
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
 
    <script src="JS/Leaflet.MakiMarkers.js"></script> 
 
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 

 
    <div id="content"> 
 
     
 
     <div id="map"> 
 
     <script type="text/javascript"> 
 
      var layer = new L.StamenTileLayer("watercolor"); 
 
      var map = new L.Map("map", { 
 
      center: new L.LatLng(56.074207, -3.376634), 
 
      zoom: 6 
 
      }); 
 
      var icon = L.MakiMarkers.icon({ 
 
      icon: "marker", 
 
      color: "#900", 
 
      size: "m", 
 
      }); 
 

 
      map.addLayer(layer); 
 

 
      L.marker([56.074207, -3.376634], { 
 
      icon: icon, 
 
      title: 'Crossgates, Fife, Scotland', 
 
      alt: 'Crossgates, Fife, Scotland', 
 
      }).addTo(map); 
 
     </script> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2015-12-20 timothys_monster

（答案编辑）

简短的回答：

可以得到黑色色/缩小按钮，你变焦，您可以添加到您的CSS：

.leaflet-bar> a：link {color：black; }

龙答：

您会注意到使用id = “地图” 的div包含的脚本。当这个脚本运行时，它会创建一个div类，其中的缩放按钮实际上是链接。

所以，如果你看看元素树，你会发现#content包含div.leaflet-bar，其中包含缩放链接。

那么，哪种颜色应该适用于链接（#content a：link或.leaflet -a a：link）？

单张链接的颜色设置在http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css

来源

2015-12-20 16:35:01 YaFred

谢谢！我改变了所有的id到类，但不幸的是，这并没有解决我有关缩放按钮的问题。我不得不离开“地图”div作为id，否则它不会被脚本识别。也许这就是为什么？ –

我转载了你的问题，我可以看到我的回答没有解决它。我希望找到一个有效的解释。 – YaFred

再次感谢您的解释。如前所述，我已将所有其他div（除“map”）更改为类。所以它现在是'.content'，而不是'＃content'了。我添加了'.leaflet-bar> a：link {color：＃000; text-decoration：none;}'到我的CSS，但它没有改变任何东西:( –

传单地图集成：传单的CSS被网站的CSS文件覆盖？

回答

相关问题