L'application de dernier enfant de l'élément ne fonctionne pas

Donné que j'ai les balises suivantes:

<div id="div-one">
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
</div>

Lorsque j'essaie d'appliquer un style à la dernier "div-deux" de l'élément à l'aide de cette syntaxe css:

#div-one div.div-two:last-child  { border-bottom:solid 1px #999; }

Il ne fonctionne pas sauf si j'ai supprimer les champs masqués. Des suggestions quant à pourquoi?

  • Voici un lien vers le jsfiddle: http://jsfiddle.net/67qYJ/1/
  • À l'aide de Google Chrome v12.0.742.100
  • Il est PAS une option pour placer les marques cachées ailleurs
Quel navigateur et la version êtes-vous tester? :last-child a moins de soutien que :first-child, je crois que c'est un sélecteur de CSS3.
Je ne crois Chrome prend en charge la :last-child, et l'a fait depuis toujours - pouvez-vous mettre en place une page de test afin que nous puissions le vérifier?
Pouvez-vous créer un exemple sur jsfiddle.net ?
Cela fonctionne très bien dans mon Chrome: jsfiddle.net/8D9UH
Demandez Chrome developer tools sur le calcul des styles. Quelque chose peut-être interférer avec votre CSS.

OriginalL'auteur Coderama | 2011-06-23

  1. 18

    De votre sélection ne fonctionne pas pour votre marquage en cours parce que le dernier enfant est un input, pas un div.div-two.

    Est div#div-one ne va contenir ces deux types d'éléments? Si oui, vous pouvez utiliser :last-of-type au lieu de cela, qui prend la dernière div (mais quelle que soit sa classe):

    #div-one div:last-of-type { border-bottom:solid 1px #999; }

    Toutefois, si votre intérieur div éléments ont d'autres classes d'ailleurs .div-two, il sera assez difficile de choisir le dernier .div-two élément. Votre code donné le rend facile parce que div et input sont distincts de types d'éléments, et seulement la .div-two classe est présent.

    Vous cloué! Merci! Je me suis donc retrouvé à l'aide de l' :last-of-type, mais pour le sélecteur de classe qui semble fonctionner.
    Être prudent, car les :nth-of-type famille ne regarde que d'un élément de type (le nom que vous voyez dans ses balises HTML). Ajout de la classe de sélecteurs juste se rétrécit vers le bas de la sélection. Si vous n'avez pas ajouter un sélecteur de type comme div, il va choisir n'importe quel élément qui est le dernier de son genre.

    OriginalL'auteur BoltClock

  2. 2

    Si vous ne pouvez pas utiliser last-of-type comme @BoltClock suggéré, vous pouvez simplement ajouter une seconde classe à la dernière .div-two dans le groupe.

    http://jsfiddle.net/watss/

    <div class="div-two last">some </div>

    et

    #div-one > .div-two.last { border-bottom:1px solid; background:yellow; }

    ou mieux encore

    #div-one > .last { border-bottom:1px solid; background:yellow; }

    OriginalL'auteur Useless Code