如何为同一页面中的不同select2项添加不同的样式？

Question

我在同一页面中使用了3个select2元素。我想为所有人添加不同的风格。 （高度，宽度，占位符等..）但是这会导致select2 css类出现问题。当我更改选择属性时，更改页面中的每个选择元素。

这是我的HTML和CSS;

.city #city-ch .select2-selection--single {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table;
  table-layout: fixed;
}

 <div class="city">
                 <span id="city-img"><img src="images/city-icon.png" alt="icon-location"></span>
       <div id="form">
           <label for="city-ch">City</label>
          <select id="city-ch" class="js-example-basic-single "style="width:100%" name="city">
                 <optgroup label="A">
                    <option value="1">a</option>
                    <option value="2">b</option>
                 </optgroup>
                 <optgroup label="B">
                    <option value="3">c</option>
                    <option value="4">d</option>
                 </optgroup>
          </select>     
      </div>
  </div>
   <div class="state">
                 <span id="state-img"><img src="images/state-icon.png" alt="icon-location"></span>
       <div id="form2">
           <label for="state-ch">State</label>
          <select id="state-ch" class="js-example-basic-single "style="width:100%" name="state">
                 <optgroup label="A">
                    <option value="1">a</option>
                    <option value="2">b</option>
                 </optgroup>
                 <optgroup label="B">
                    <option value="3">c</option>
                    <option value="4">d</option>
                 </optgroup>
          </select>     
      </div>
  </div>
   <div class="category">
                 <span id="category-img"><img src="images/category-icon.png" alt="icon-location"></span>
       <div id="form3">
           <label for="category-ch">Category</label>
          <select id="category-ch" class="js-example-basic-single "style="width:100%" name="category">
                 <optgroup label="A">
                    <option value="1">a</option>
                    <option value="2">b</option>
                 </optgroup>
                 <optgroup label="B">
                    <option value="3">c</option>
                    <option value="4">d</option>
                 </optgroup>
          </select>     
      </div>
  </div>

第一个select2元素的这些css功能会影响页面上的其他select2元素。我为每个使用唯一的id。但仍然是一样的..有谁能帮助我解决这个问题？

谢谢..