Question

我正在使用Squarespace并尝试使用“ nth-of-type”移动第一个.field.text.three-digits的边距，但是我无法使其正常工作。

CSS：

.form-item.fields.phone:nth-of-type(3) {
  background-color: red;
  margin-left: 20%;
}

HTML：

<fieldset id="phone-yui_3_17_2_1_1531771537607_16560" class="form-item fields 
  phone">
   <div class="title">Phone</div>
   <legend>Phone</legend>
   <div class="field text three-digits" id="yui_3_17_2_1_1531936132691_509">
       <label class="caption" id="yui_3_17_2_1_1531936132691_508"><input 
        class="field-element" x-autocompletetype="phone-area-code" type="text" 
        maxlength="3" data-title="Areacode" id="yui_3_17_2_1_1531936132691_507"> 
        (###)</label>
   </div>
   <div class="field text three-digits">
       <label class="caption"><input class="field-element" x- 
        autocompletetype="phone-local-prefix" type="text" maxlength="3" data- 
        title="Prefix">###</label>
   </div>
   <div class="field text four-digits">
       <label class="caption"><input class="field-element" x- 
        autocompletetype="phone-local-suffix" type="text" maxlength="4" data- 
        title="Line">####</label>
   </div>
</fieldset>

谢谢！

Answer 1

此代码：

.form-item.fields.phone:nth-of-type(3)

将样式应用于在这三个类中找到的第三个元素

form-item fields phone

如果要使用类field text three-digits修改元素的第一个实例，则CSS应该是这样的：

.field.text.three-digits:nth-of-type(2) {
  background-color: red;
  margin-left: 20%;
}

平方空间上的第n个类型

1 个答案: