html - 样式表不适用于 HTML？

Question

我正在我的网站上添加一个 Google Places 自动完成框。

#pac-card.pac-card
  div
    #pac-title
      | Autocomplete search
    #type-selector.pac-controls
      input#changetype-all(type='radio', name='type', checked='checked')
      label(for='changetype-all') All
      input#changetype-establishment(type='radio', name='type')
      label(for='changetype-establishment') Establishments
      input#changetype-address(type='radio', name='type')
      label(for='changetype-address') Addresses
      input#changetype-geocode(type='radio', name='type')
      label(for='changetype-geocode') Geocodes
    #strict-bounds-selector.pac-controls
      input#use-strict-bounds(type='checkbox', value='')
      label(for='use-strict-bounds') Strict Bounds
  #pac-container
    input#pac-input(type='text', placeholder='Enter a location')

并定义了一个样式表:

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

我确实在页面上包含了样式表。样式表不适用于 HTML 的可能原因是什么？

代码是正确的，因为我在 jsfiddle 上试过了。

Answer 1

您的代码不是 HTML(可能是生成 HTML 的模板代码？)。 我查看了 Place Autocomplete 文档 ( https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=fr )，HTML 应如下所示:

<input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-address">
      <label for="changetype-address">Addresses</label>

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map"></div>

例如，在这段代码中，我看不到任何 div 的#pac-container id。

首先，确保您生成的 HTML 具有与您的样式相对应的正确 CSS 选择器。