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

问题描述 投票:1回答:1

如何选择具有元素类别为iti-sdc-1iti-sdc-2iti-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>
html css
1个回答
1
投票

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

[class*="iti-sdc-"] {
  font-size: 2em;
}
© www.soinside.com 2019 - 2024. All rights reserved.