Google 地图 API CSS 边框问题：对；

Question

我有一个非常简单的 Flexbox 容器，有四个 div（其中一个带有 Google Maps API）。<div class="container">     <div class="main-1"></div>     <div class="main-2"></div>     <div class="main-3"></div>     <div id="map" class="main-map"></div>     </div>为了制作一个简单的边框，我尝试了：.container div:not(#map) {     border-right: 10px solid #FFFFFF; }和.container div:not(:last-child) {     border-right: 10px solid #FFFFFF; }边界出现了，但相同的边界出现在我的地图中，我不知道如何摆脱它们...... - 图片： 图片链接或者，是否没有其他方法可以在弹性盒中创建此类边框？像这样的东西：flex-gap: 10px #FFFFFF;或类似的东西...

Answer 1

虽然我不能 100% 确定这个问题，但问题似乎在于你的 CSS 瞄准了它不应该瞄准的东西。

Google 地图将在该元素下添加多个 div 元素#map，并且您的 CSS 规则也与这些元素匹配，因此它们也会获得边框。

您需要重置子 div 的边框#map或排除它们。

如果有边框的div元素是直接子元素，.container则使用

.container > div:not(#map) {

    border-right: 10px solid #FFFFFF;

}

如果您有更复杂的结构并且无法直接排除 的子级，#map则重置它们。

.container div {

    border-right: 10px solid #FFFFFF;

}

.container #map div {

    border-right: none;

}