Amacım en son CSS'yi uygulamak li, ancak bunu yapmıyor.
#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>Sadece son çocuğu nasıl seçebilirim ?
Yanıtlar:
:last-childPseudoclass hala güvenilir tarayıcılar arasında kullanılamaz. Özellikle, Internet Explorer sürümleri <9 ve Safari <3.2 kesinlikle bunu desteklemeyen Internet Explorer 7 ve Safari 3.2 rağmen, do desteği:first-child merakla.
En iyi bahsiniz, last-childo öğeye açıkça bir (veya benzer) sınıf eklemek ve li.last-childonun yerine başvurmaktır .
:last-child .
Sizin için işe yarayabilecek bir başka çözüm de ilişkiyi tersine çevirmektir. Böylece tüm liste öğeleri için sınır belirlersiniz. Daha sonra ilk öğenin sınırını ortadan kaldırmak için birinci çocuğu kullanırsınız. İlk çocuk, tüm tarayıcılarda statik olarak desteklenir (başka bir kod aracılığıyla dinamik olarak eklenemeyeceği anlamına gelir, ancak ilk çocuk bir CSS2 seçicidir, oysa son çocuk CSS3 belirtimine eklenmiştir)
Not: Bu, yalnızca sizin örneğinizde olduğu gibi listede yalnızca 2 öğe varsa amaçladığınız şekilde çalışır. Herhangi bir 3. öğe ve üzeri, kendilerine sınır uygulanacaktır.
Javascript kullanabileceğinizi düşünüyorsanız, jQuery desteklediğinden beri last-child, jQuery'nin css yöntemini kullanabilirsiniz ve iyi olan şey, hemen hemen tüm tarayıcıları destekleyecektir.
Örnek Kod:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Burada daha fazla bilgi bulabilirsiniz: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')stil sayfalarınızda tutabilmek için böyle bir şey yapmak çok daha iyi .
div:last-childve hem de içeren bir sınıfı yüklemez div.last-child. :last-childSözdiziminin geçersiz olduğunu düşündüğü ve sözde seçiciye sahip herhangi bir sınıfın uygulanmayacağı anlaşılıyor.
Liste öğelerinin sayısı sabitlenmişse, bitişik seçiciyi kullanabilirsiniz, örneğin yalnızca üç öğeniz varsa <li>, sonuncuyu aşağıdakilerle seçebilirsiniz <li>:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liseçer . Seçiciniz basitçe olmalıdır . li#navli#nav li + li + li
Kendinizi sık sık CSS3 seçicilerine ihtiyaç duyuyorsanız, sitenizdeki selectivizr kitaplığını her zaman kullanabilirsiniz:
Bu, aksi takdirde onları desteklemeyecek tarayıcılara neredeyse tüm CSS3 seçicileri için destek ekleyen bir JS betiğidir.
<head>Bir IE koşuluyla etiketinize atın :
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->son çocuk sözde sınıfı IE'de çalışmıyor
Bir sınıfı kullanmaya alternatif olarak, alt dt öğelerini bir biçime ve alt dd öğelerini başka bir biçime sahip olacak şekilde ayarlayarak ayrıntılı bir liste kullanabilirsiniz. Örneğiniz şöyle olacaktır:
#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>Hiçbir yöntem diğerinden daha iyi değildir ve sadece kişisel tercihe bağlıdır.
Sınırı neden UL'nin altına uygulamıyorsunuz?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomilgili <ul>eleman veya margin-bottomson on <li>elemanı, bu doğru ve alt kısımda istenen yerleştirmenin son olmayacaktır <li>elemanı. Aksi takdirde, bu iyi bir çözümdür.
Öğeleri yüzüyorsanız sırayı tersine çevirebilirsiniz
yani float: right;yerinefloat: left;
Ve sonra bir sınıfın ilk çocuğunu seçmek için bu yöntemi kullanın.
/* 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;
}Bu aslında sınıfı yalnızca LAST örneğine uygulamaktır çünkü artık ters sırada.
İşte size çalışan bir örnek:
<!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>CSS'nizin geri kalanını görmeden söylemek zor, ancak !importantbunu yapmak için kenarlık renginin önüne eklemeyi deneyin :
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
:last-child. Ve o kadar da ilginç değil .:first-childbir CSS2 sözde sınıfı,:last-childbir CSS3 sözde sınıfıdır.