Qual è il sostituto del selettore figlio?

Question

Poiché IE6 non supporta il selettore figlio (vedere http://kimblim.dk/csstest/#ex1 ), qual è l'alternativa quando si tratta di questo browser?

Non voglio modificare il markup e preferirei di gran lunga una soluzione solo CSS ...

E sì, è il bambino diretto che desidero prendere di mira.

Grazie!

Answer 1

Mi sono imbattuto in una sorta di hack: http : //meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ Utilizzo dell'hacking " star html " per IE (6 e sotto) in combinazione con questo mi permette di selezionare il bambino diretto. Diciamo che vogliamo applicare un padding-top di 10px al figlio diretto, F, di E:

* html body E F
{
    /* apply style here for IE 6 */
    padding-top: 10px;
    /* This applies the style to every F inside of E */
}
* html body E * F
{
    /* undo style here */
    padding-top: 0px;
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */
}

Apprezzo le tue risposte finora, ma per quanto odio accettare la mia risposta, questa è stata la soluzione su cui alla fine ho deciso. Grazie ragazzi!

Answer 2

Puoi usare jQuery, non una soluzione carina, ma è un'opzione che ho usato in passato:

$("parent > child").each(function() {
    $(this).addClass("child-styles");
}

Ovviamente vorrai racchiuderlo in qualche controllo IE6 specializzato. E probabilmente vuoi un foglio di stile avvolto nell'istruzione IE6 IF per aggiungere questi stili specializzati.

Answer 3

Ecco una buona soluzione che ho trovato in un libro: " The Anthology of Javascript "

Qualcosa del genere:

/* for all but IE */
#nav ul li.currentpage > a:hover {
  background-color: #eff;
}

E il codice per soddisfare IE:

/* for IE */
* html #nav ul li.currentpage a:hover {
  background-color: expression(/currentpage/.test(this.parentNode.className)? "#eff" : "#ef0");
}

L'hack per IE è che solo IE pensa che ci sia un wrapper su html e IE supporta l'espressione ().

L'espressione usa un'espressione regolare (/ currentpage /) e la verifica rispetto alla classe del nodo padre, quindi i figli diretti dell'elemento li.currentpage saranno impostati su #eff, gli altri discendenti saranno impostati su # EF0.

Nota che i colori usati sono falsi, per favore non commentarli ;-)

Answer 4

In questo post vengono descritte tutte le diverse opzioni per emulare i selettori figlio CSS in IE6, incluso un piccolo trucco alla fine per lavorare con strutture nidificate: http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6 /

Answer 5

Hai bisogno di un figlio diretto? IE6 supporta selettori discendenti come

div span { ... }

Forse potresti sfruttarlo per indirizzare ciò che desideri. Forse potresti pubblicare del codice in modo che possiamo darti una risposta più specifica?

Answer 6

Mettere una classe personalizzata sull'elemento.

<ul>
<li class="first">Blah<li>
<li>Blah<li>
<li>Blah<li>
</ul>

Answer 7

Usa questo

div * { padding-left:20px; }
div * * { padding-left:0; }

Per prima cosa prendi di mira tutti i bambini e poi resetti la dichiarazione css prendendo di mira tutti i nipoti.

Answer 8

Una soluzione cross-browser che ho usato è la seguente. Non utilizza hack IE6 e visualizza correttamente gli elenchi incorporati (diciamo che è necessario progettare gli oggetti nidificati OL e UL in modo diverso).

ul, ol {
    /* Set margins, padding, and other generic styles */
}
ul li, ul ul li, ol ul li {
    list-style-type: disc; /* unordered lists */
}
ol li, ul ol li, ol ol li {
    list-style-type: decimal; /* ordered lists */
}

È facile come lo yodeling CSS!