Tujuan saya adalah menerapkan CSS di bagian terakhir li, tetapi tidak melakukannya.
#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>Bagaimana saya bisa memilih hanya anak terakhir?
Jawaban:
The :last-childpseudoclass masih tidak dapat dipercaya digunakan di seluruh browser. Secara khusus, Internet Explorer versi <9, dan Safari <3,2 pasti tidak mendukungnya , meskipun Internet Explorer 7 dan Safari 3.2 melakukan dukungan:first-child , rasa ingin tahu.
Taruhan terbaik Anda adalah secara eksplisit menambahkan kelas last-child(atau serupa) ke item itu, dan menerapkannya li.last-childsebagai gantinya.
:last-child .
Solusi lain yang mungkin berhasil untuk Anda adalah membalikkan hubungan. Jadi Anda akan mengatur perbatasan untuk semua item daftar. Anda kemudian akan menggunakan first-child untuk menghilangkan border untuk item pertama. Anak pertama didukung secara statis di semua browser (artinya tidak dapat ditambahkan secara dinamis melalui kode lain, tetapi anak pertama adalah pemilih CSS2, sedangkan anak terakhir ditambahkan dalam spesifikasi CSS3)
Catatan: Ini hanya berfungsi seperti yang Anda inginkan jika Anda hanya memiliki 2 item dalam daftar seperti contoh Anda. Item ketiga dan seterusnya akan memiliki batas yang diterapkan padanya.
Jika Anda merasa dapat menggunakan Javascript, maka karena dukungan jQuery last-child, Anda dapat menggunakan metode css jQuery dan hal baiknya akan mendukung hampir semua browser
Kode Contoh:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Anda dapat menemukan info lebih lanjut tentang di sini: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')agar Anda dapat mempertahankan gaya Anda di lembar gaya.
div:last-childdan div.last-child. Tampaknya itu menganggap :last-childsintaks tidak valid dan kelas apa pun dengan pseudo-selector tidak akan diterapkan.
Jika jumlah item daftar tetap, Anda dapat menggunakan pemilih yang berdekatan, misalnya jika Anda hanya memiliki tiga <li>elemen, Anda dapat memilih yang terakhir <li>dengan:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav limemilih libagian dalam #navyang muncul setelahnya li. Selektor Anda seharusnya begitu #nav li + li + li.
Jika Anda sering menginginkan pemilih CSS3, Anda selalu dapat menggunakan pustaka selectivizr di situs Anda:
Ini adalah skrip JS yang menambahkan dukungan untuk hampir semua pemilih CSS3 ke browser yang tidak mendukung mereka.
Lemparkan ke <head>tag Anda dengan persyaratan IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->kelas semu anak terakhir tidak berfungsi di IE
Sebagai alternatif untuk menggunakan kelas, Anda bisa menggunakan daftar mendetail, menyetel elemen anak dt untuk memiliki satu gaya dan elemen anak dd memiliki gaya yang lain. Contoh Anda akan menjadi:
#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>Tidak ada metode yang lebih baik dari yang lain dan itu hanya tergantung pada preferensi pribadi.
Mengapa tidak menerapkan batas ke bagian bawah UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottompada <ul>elemen atau margin-bottompada yang terakhir <li>unsur, ini tidak akan memiliki penempatan yang diinginkan dari bawah kanan yang terakhir <li>elemen. Jika tidak, ini adalah solusi yang bagus.
Jika Anda mengapung elemen, Anda dapat membalik urutannya
yaitu float: right; bukanfloat: left;
Dan kemudian gunakan metode ini untuk memilih anak pertama dari sebuah kelas.
/* 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;
}Ini sebenarnya menerapkan kelas ke contoh TERAKHIR hanya karena sekarang dalam urutan terbalik.
Berikut adalah contoh yang berfungsi untuk Anda:
<!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. Dan itu tidak terlalu aneh.:first-childadalah pseudo-class CSS2, pseudo-class:last-childCSS3.