如何在某一类在CSS选择特定的位置元素

Question

这里是我的HTML代码的一部分：

<label> 
    Work&nbsp;Address: 
</label> 
<input type="text" id="workAddress0" name="workAddress0"> 
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('work')"><br> 

<label> 
    Hobby&nbsp;Address: 
</label> 
<input type="text" id="hobbyAddress0" name="hobbyAddress0"> 
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('hobby')"><br> 

我的CSS是：

.btn.btn-small:first-of-type{ 
position: absolute; 
left: 953px; 
top:290px; 
height: 40px; 
text-align: center; 
} 

.btn.btn-small:nth-of-type(2){ 
position: absolute; 
left: 953px; 
top:337px; 
height: 40px; 
text-align: center; 
} 

我想设置的第一个按钮顶部290px和第二个按钮顶部337px;但是这个选择不起作用。你能告诉我如何认识到这一点吗？我想单独选择这个类的第一个和第二个（btn btn-small）。预先感谢您

Answer 1

：首先会在这里查找标签的第一次出现，这里是inp ut或标签，并且如果它也具有该类别，则将其选中。在这里你的第一类输入根本就没有课，它永远不会被选中。

您可以尝试使用〜选择器将类跳转到类。

.btn.btn-small { 
 
    position: absolute; 
 
    left: 953px; 
 
    top: 290px; 
 
    height: 40px; 
 
    text-align: center; 
 
} 
 
.btn.btn-small ~.btn.btn-small { 
 
    position: absolute; 
 
    left: 953px; 
 
    top: 337px; 
 
    height: 40px; 
 
    text-align: center; 
 
} 
 
.btn.btn-small ~.btn.btn-small ~ .btn.btn-small { 
 
    top: auto;/* reset here , else third, forth will be at 337px; */ 
 
}

<label> 
 
    Work&nbsp;Address: 
 
</label> 
 
<input type="text" id="workAddress0" name="workAddress0"> 
 
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('work')"> 
 
<br> 
 

 
<label> 
 
    Hobby&nbsp;Address: 
 
</label> 
 
<input type="text" id="hobbyAddress0" name="hobbyAddress0"> 
 
<input type="button" value="+" class="btn btn-small" onclick="ui.createTextfield('hobby')"> 
 
<br>

Answer 2

-of-type CSS中的选择器指的是元素类型（即p，a，div等），而不是类。

你可以使用这样的选择为目标的第一个按钮：

#workAddress0 + .btn { 
    ... 
} 

用简单的英语，这个选择读作：

找到类的元素，包括“BTN”立即跟随一个元素 ，ID为“workAddress0”