CSS :not(:last-child):after Selektor

Question

Ich habe eine Liste von Elementen, die wie folgt gestaltet sind:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Ausgänge One | Two | Three | Four | Five | 代わりに One | Two | Three | Four | Five

Weiß jemand, wie man mit CSS alle Elemente bis auf das letzte auswählen kann?

Sie können die Definition der :not() Selektor aquí

Answer 1

Wenn es sich um ein Problem mit dem Nicht-Selektor handelt, können Sie alle Selektoren einstellen und den letzten überschreiben

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

oder wenn Sie "before" verwenden können, brauchen Sie kein "last-child

li+li:before
{
  content: '| ';
}

Answer 2

Alles scheint korrekt zu sein. Vielleicht möchten Sie den folgenden CSS-Selektor anstelle von dem, was Sie verwendet haben, verwenden.

ul > li:not(:last-child):after

Answer 3

Bei mir funktioniert es einwandfrei

&:not(:last-child){
            text-transform: uppercase;
        }

Answer 4

Ihr Beispiel funktioniert bei mir in Chrome 11 einwandfrei. Vielleicht unterstützt Ihr Browser einfach nicht die :not() Selektor?

Möglicherweise müssen Sie JavaScript oder ähnliches verwenden, um dies browserübergreifend zu erreichen. jQuery implementiert :not() in seiner Selektor-API.

Answer 5

Ein Beispiel mit CSS

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }