如何基于子类改变div？

Question

我正在使用谷歌地图，我想更改“信息窗口”尺寸。

gmaps js自动生成此部分：

我想定位没有id或类的选定部分来识别更改它的宽度。然后我认为我需要使用它的名为“gm-style-iw”的子div类作为参考来达到上面的另一个div。

这个想法是这样的：

div < .gm-style-iw {
 width: 220px;
}

但我们知道这个'＆lt;'使用css是不可能的。

我该怎么做？

Answer 1

正如您可能已经知道的那样，您需要使用javascript才能按预期工作，并使用jQuery的.parent() ^ref 。方法可能是到达那里最直接的途径。

参考：.parent() | jQuery API Documentation

考虑以下内容：

jQuery('.gm-style-iw').parent().css('width','220px');

在检查元素时，您会注意到已应用内联width属性并且过度限定外部width属性规则集是选择器{{ 1}}。

代码段示范：

.parent

jQuery('.gm-style-iw').parent().css('width','220px');

.parent {
    width: 100%;
    background: #dadada;
    padding: 5px;
    border: 1px dashed;
    box-sizing: border-box;
}

最好考虑将类应用于这些元素。如上所示，内联样式规则非常持久，并且在不过多依赖<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="gm-style-iw"><code>gm-style-iw</code></div> </div>声明的情况下过度限定非常棘手。

请考虑以下事项：

!important

使用类选择器作为您的标识符，您可以避免这个问题，这可能会让您在线上留下一些白发，或者在构建中浪费几个小时。

代码段示范：

jQuery('.gm-style-iw').parent().addClass('contians-child');

jQuery('.gm-style-iw').parent().addClass('contians-child');

.parent {
    width: 100%;
    background: #dadada;
    padding: 5px;
    border: 1px dashed;
    box-sizing: border-box;
}

.parent.contians-child {
    width: 220px;
}