html - 如何在父 div 内使用 CSS 选择器定位所有元素 1,2,3,4.........n

Question

iti-sdc-1如何选择具有 class , iti-sdc-2, iti-sdc-3....n的元素的所有元素。这个类是自动生成的。请任何人帮我解决这个问题。

我试图选择班级iti-sdc-*

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-1 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-1 input[type=tel], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-1 input[type=text]{
  width: 100%;
  padding-left: 20px;
  border: 1px solid grey;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text]{
  width: 100%;
  padding-left: 20px;
  border: 1px solid grey;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text]{
  width: 100%;
  padding-left: 20px;
  border: 1px solid grey;
}

<div class="intl-tel-input allow-dropdown separate-dial-code iti-sdc-1">
<input maxlength="15" class="phone" type="text">
</div>
<div class="intl-tel-input allow-dropdown separate-dial-code iti-sdc-2">
<input maxlength="15" class="phone" type="text">
</div>
<div class="intl-tel-input allow-dropdown separate-dial-code iti-sdc-3">
<input maxlength="15" class="phone" type="text">
</div>

标签： htmlcss

Answer 1

您可以使用此选择器定位这些元素：

[class*="iti-sdc-"] {
  font-size: 2em;
}