Mục tiêu của tôi là áp dụng CSS cuối cùng li, nhưng nó không làm được điều đó.
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>Làm cách nào để chỉ chọn đứa trẻ cuối cùng?
Câu trả lời:
Các :last-childpseudoclass vẫn không thể tin cậy được sử dụng trên trình duyệt. Đặc biệt, các phiên bản Internet Explorer <9 và Safari <3.2 chắc chắn không hỗ trợ nó , mặc dù Internet Explorer 7 và Safari 3.2 thực sự hỗ trợ :first-child.
Đặt cược tốt nhất của bạn là thêm rõ ràng một lớp last-child(hoặc tương tự) vào mục đó và áp dụng li.last-childthay thế.
:last-child
Một giải pháp khác có thể hiệu quả với bạn là đảo ngược mối quan hệ. Vì vậy, bạn sẽ thiết lập đường viền cho tất cả các mục danh sách. Sau đó, bạn sẽ sử dụng first-child để loại bỏ đường viền cho mục đầu tiên. Con đầu tiên được hỗ trợ tĩnh trong tất cả các trình duyệt (có nghĩa là nó không thể được thêm động thông qua mã khác, nhưng con đầu tiên là một bộ chọn CSS2, trong khi con cuối được thêm vào đặc tả CSS3)
Lưu ý: Điều này chỉ hoạt động theo cách bạn dự định nếu bạn chỉ có 2 mục trong danh sách như ví dụ của bạn. Bất kỳ mục thứ 3 trở đi sẽ có đường viền áp dụng cho chúng.
Nếu bạn nghĩ rằng bạn có thể sử dụng Javascript, thì kể từ khi hỗ trợ jQuery last-child, bạn có thể sử dụng phương thức css của jQuery và điều tốt là nó sẽ hỗ trợ hầu hết các trình duyệt
Mã ví dụ:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Bạn có thể tìm thêm thông tin về đây: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')để bạn có thể giữ kiểu tóc của mình trong bảng định kiểu.
div:last-childvà div.last-child. Có vẻ như nó coi :last-childcú pháp là không hợp lệ và bất kỳ lớp nào có bộ chọn giả đó sẽ không được áp dụng.
Nếu số lượng mục trong danh sách là cố định, bạn có thể sử dụng bộ chọn liền kề, ví dụ: nếu bạn chỉ có ba <li>phần tử, bạn có thể chọn cuối cùng <li>với:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav lichọn libên trong #navđến sau li. Bộ chọn của bạn chỉ nên là #nav li + li + li.
Nếu bạn thường xuyên muốn các bộ chọn CSS3, bạn luôn có thể sử dụng thư viện selectivizr trên trang web của mình:
Đó là một tập lệnh JS bổ sung hỗ trợ cho hầu hết tất cả các bộ chọn CSS3 cho các trình duyệt không hỗ trợ chúng.
Ném nó vào <head>thẻ của bạn với một điều kiện IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->lớp giả con cuối không hoạt động trong IE
Để thay thế cho việc sử dụng một lớp, bạn có thể sử dụng danh sách chi tiết, đặt các phần tử dt con có một kiểu và các phần tử dd con có kiểu khác. Ví dụ của bạn sẽ trở thành:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}html:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>Không có phương pháp nào tốt hơn phương pháp kia và nó chỉ phụ thuộc vào sở thích cá nhân.
Tại sao không áp dụng đường viền cho phần dưới cùng của UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomtrên <ul>phần tử hoặc margin-bottomtrên <li>phần tử cuối cùng , điều này sẽ không có vị trí mong muốn ngay bên dưới <li>phần tử cuối cùng . Nếu không, đây là một giải pháp tốt.
Nếu bạn đang thả nổi các phần tử, bạn có thể đảo ngược thứ tự
tức là float: right;thay vìfloat: left;
Và sau đó sử dụng phương pháp này để chọn con đầu tiên của một lớp.
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}Điều này thực sự chỉ áp dụng lớp cho cá thể CUỐI CÙNG vì bây giờ nó đã được đảo ngược thứ tự.
Đây là một ví dụ làm việc cho bạn:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
:last-child. Và nó không gây tò mò.:first-childlà một lớp giả CSS2,:last-childmột lớp giả CSS3.