如何在某一類在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」