2015-12-20 17 views
1

我想为我的网站添加一个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>

回答

1

(答案编辑)

简短的回答:

可以得到黑色色/缩小按钮,你变焦,您可以添加到您的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

+0

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

+0

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

+0

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