IE8 :nth-child ve :

SORU

13 Aralık 2011, Salı

IE8 :nth-child ve :

İşte benim CSS:

#nav-primary ul li:nth-child(1) a:after { }

Artık her yerde (benim web sitesinde this kullanılan) Internet Explorer dışında 8... işe yarıyor

Muhtemelen bir şekilde IE8 nth-çocuk var mı acaba? Bu tarayıcı en kötü versiyonu... hiçbir şey olması gerektiği ve bunu düzeltmek için bir yol bulamıyorum gibi çalışır.

@edit: Ne elde etmek istiyorum basitleştirilmiş versiyonu: http://jsfiddle.net/LvvNL/. Bu sadece bir başlangıç. CSS bu bağlantılar her bir amaç için olması lazım çok daha karmaşık olacaktır. Her bağlantı için sınıfları tek yolu değildir eklemeyi umuyoruz

@edit2: Sadece bunu fark ettim

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

Aslında IE8 çalışma! Ama bu:

#nav-primary ul li:nth-child(1) a:after {
    content: "Text";
    display: block;
    font-weight: normal;
    padding-top: 5px;
    font-size: 12px;
    color: #666;
}

çalışma DEĞİL. Neler oluyor?

CEVAP

13 Aralık 2011, Salı

(Ab) adjacent sibling combinator ( ) 7/8'de çalışan CSS ile bunu başarmak için kullanabilirsiniz.

Bkz:http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child   li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child   li   li a {
    border-top: 5px solid green;
}

:nth-child(odd) Bu yöntem ile :nth-child(4n 3) :nth-child() daha karmaşık varyasyonları taklit edemiyor.

Bunu Paylaş: