Question

我正在使用google maps infowindow样式，我想更改一些自动生成的div的css。

如何仅使用css更改这些部分？

<div class="gm-style">
 <div>
  <div></div>
  <div></div>
  <div></div>
  <div>
   <div></div>
   <div></div>
   <div></div>
   <div>
    <div>         /*  <--------------  I wanto to change this one */
      <div></div> /*  <--------------  And this */
      <div class="gm-style-iw"></div>
    </div>
    /*(...)*/ 
   </div>
   /*(...)*/
  </div>
 </div>
 /*(...)*/
</div>

Obs：我不想使用javascript，因为它需要使用我正在努力解决的谷歌库中的一些功能（Listening infowindow with Gmaps4rails gem）。

Answer 1

使用.gm-style>div>div:nth-of-type(4)>div:nth-of-type(4)>div { color: red; } /* is nested inside targetted div */ .gm-style-iw { color: initial; }选择器可能适合您。

＆＃13;

<div class="gm-style">
  <div>
    <div>Not this</div>
    <div>Not this</div>
    <div>Not this</div>
    <div>
      <div>Not this</div>
      <div>Not this</div>
      <div>Not this</div>
      <div>
        <div> I wanto to change this one
          <div>And this</div>
          <div class="gm-style-iw">*Not this</div>
        </div>
        Not this
      </div>
      Not this
    </div>
  </div>
  Not this
</div>

＆＃13;

PGPPublicKey.RSA_GENERAL, publicKey, privateKey, new Date(),
            "Hans Mueller \n <hans.mueller@mail.com>", PGPEncryptedData.CAST5, passPhrase, null, null, new SecureRandom(), "BC");

＆＃13;

Answer 2

如果结构没有改变，你可以这样做：

＆＃13;

.gm-style>div>div>div>div:first-child {
  border: 1px solid red;
}

.gm-style>div>div>div>div>div:first-child {
  border: 1px solid red;
}

＆＃13;

<div class="gm-style">
  <div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>
      <div>---</div>
      <div>---</div>
      <div>---</div>
      <div>
        <!-- select this one -->
        <div> I want to change this one
          <!-- and this one -->
          <div> And this</div>
          <!-- -->
          <div class="gm-style-iw">---</div>
        </div>
        <!-- -->
        ---
      </div>
      ---
    </div>
    ---
  </div>
  ---
</div>

＆＃13;

Answer 3

谢谢你们的答案，并从你的代码中获取一些东西，这就解决了我的问题：

.gm-style>div>div:nth-of-type(4)>div:nth-of-type(4)>div {
  /* something */
}

.gm-style>div>div:nth-of-type(4)>div:nth-of-type(4)>div>div:first-of-type {
  /* something */
}

如何更改嵌套在其他div中的div元素？

3 个答案: