css - 如何在同一页面上控制两个 Google map 自动完成实例的 css？

Question

我正在使用 .pac-container 和 .pac-item 类来控制我的自动完成类的一个实例，但是如果我有两个，我该如何控制它第二个不同风格的容器？我尝试向父元素添加一个 id，但它似乎不起作用？

form#rating_form .pac-container{
  background-color: blue !important;
}

Answer 1

.pac-container 将附加到正文中，在选择器中使用表单将不会匹配这些 div

您可以使用 nth-last-child 选择器来应用不同的样式。2 个自动完成的示例:

function initialize() {
  var pacs = document.getElementsByName('pac-input');
  for (var i = 0; i < pacs.length; ++i) {
    new google.maps.places.Autocomplete(pacs[i]);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

/*#1*/
body>div.pac-container:nth-last-child(2n) {
  background: red;
}

/*#2*/
body>div.pac-container:nth-last-child(2n+1) {
  background: blue;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>
<input name="pac-input" />
<br/>
<input name="pac-input" />
<br/>

对于 3 个自动完成，它将是:

function initialize() {
  var pacs = document.getElementsByName('pac-input');
  for (var i = 0; i < pacs.length; ++i) {
    new google.maps.places.Autocomplete(pacs[i]);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

/*#1*/
body>div.pac-container:nth-last-child(3n) {
  background: red;
}

/*#2*/
body>div.pac-container:nth-last-child(3n+2) {
  background: blue;
}

/*#3*/
body>div.pac-container:nth-last-child(3n+1) {
  background: yellow;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>
<input name="pac-input" />
<br/>
<input name="pac-input" />
<br/>
<input name="pac-input" />
<br/>