如何遍歷CSS中的元素

Question

我有一個簡單的表格結構，通過單擊上下按鈕可以更改表格行的順序。現在我要實現的是，當一行成為順序中的第一行時，應該禁用``向上''按鈕，當一行成為列表中的最后一行時，應該禁用向下按鈕，並且要實現這種禁用效果，我只想使用css，所以有可能嗎？我如何才能使用css到達/遍歷向上和向下按鈕。

 $(".order").click(function() { var prevTr = $(this).closest('tr').prev('tr'); var nextTr = $(this).closest('tr').next('tr'); var currentTr = $(this).closest('tr'); var getClick = $(this).data('rel'); (getClick > 1) ? currentTr.insertAfter(nextTr): currentTr.insertBefore(prevTr); }); 

 /*adding red color to show disabled effect */ table tr:last-child td:first-child .order:first-child { background: red; } table tr:first-child td:first-child .order:first-child { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td> <button data-rel="1" class="order">Up</button> </td> <td> <button data-rel="2" class="order">Down</button> </td> </tr> <tr> <td>2</td> <td> <button data-rel="1" class="order">Up</button> </td> <td> <button data-rel="2" class="order">Down</button> </td> </tr> <tr> <td>3</td> <td> <button data-rel="1" class="order">Up</button> </td> <td> <button data-rel="2" class="order">Down</button> </td> </tr> <tr> <td>4</td> <td> <button data-rel="1" class="order">Up</button> </td> <td> <button data-rel="2" class="order">Down</button> </td> </tr> 

Answer 1

工作提琴

是的，您可以這樣做，請嘗試以下操作：

table tr:first-child td:nth-child(2){
    display:none;
}

table tr:last-child td:nth-child(3){
    display:none;
}   

這將隱藏按鈕，將其禁用嘗試：

opacity: 0.65; 
cursor: not-allowed;

代替 ：

display:none;

希望這可以幫助。

Answer 2

：first-child是CSS 2.1選擇器之一，因此自IE8起可用

如果您對是否可以使用舊的瀏覽器使用功能有任何疑問，此資源非常有用。

http://caniuse.com/#feat=css-sel2