将 ID 选择器注入样式

Injecting an ID selector into a style

本文关键字：样式 注入 选择器 ID      更新时间：2023-09-26

UPDATE：这是我自己的小提琴，演示了这个问题 - 请注意，边框和颜色被拾取，但字体没有。

看看这个小提琴，我们有这个 CSS：

#mapbox .myinfo {
    font-family:Georgia, serif;
    font-size:18px;
}

还有这个Javascript：

var infowindow = new google.maps.InfoWindow({
    map: map,
    position: center,
    content: '<div class="myinfo">Computer History!</div>'
});

使用 MarkerWithLabel 类时，我（大约）有以下代码：

.myinfo {
    font-family:Georgia, serif;
    font-size:18px;
}
new MarkerWithLabel({
    position: location,
    draggable: false,
    map: this.map,
    labelContent: "99",
    labelAnchor: new google.maps.Point(20, 0),
    labelClass: "myinfo",
    title: "Value 99 at location X"
});

我不能在我的 CSS 文件中使用#mapbox，因为地图 ID 可以更改，甚至可以在单个页面上有两个地图。是否有技巧可以将 ID 动态添加到样式或以其他方式解决我的问题？其他StackOverflow问题建议使用!important，但这完全破坏了标记布局。

我建议您使用继承而不是找出解决方法。

例如 

div.gm-style-iw > div > div.myinfo {
    font-family:Georgia, serif;
    font-size:18px;
    width: 400px;
    height: 400px;
}

这将做的是通过从预定义的谷歌地图类中固有类来获取您的值，这将由您设置的类值自动应用。

希望这有帮助。

相关文章：