kzen.dev
Viac na
Question

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

Mám zoznam prvkov, ktoré sú štylizované takto:

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>

Výstupy One | Two | Three | Four | Five | namiesto One | Two | Three | Four | Five

Vie niekto, ako CSS vybrať všetky prvky okrem posledného?

Definíciu selektora :not() si môžete pozrieť tu

diralik
diralik
Edited question 20 január 2018 в 10:07
Programovanie
css
pseudo-element
css-selectors
This question has 1 odpoveď in English, to read them log in to your account.
Solution / Answer

Ak ide o problém s výberom not, môžete nastaviť všetky a prepísať posledný z nich

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

alebo ak môžete použiť pred, nepotrebujete last-child

li+li:before
{
  content: '| ';
}
409
Artificial intelligence to parse product page
productapi.dev

Váš príklad, ako je napísaný, mi v prehliadači Chrome 11 funguje perfektne. Možno váš prehliadač len nepodporuje selektor :not()?

Možno budete musieť použiť JavaScript alebo niečo podobné, aby ste to dosiahli naprieč prehliadačmi. jQuery implementuje :not() vo svojom API selektora.

25
Artificial intelligence to parse product page
productapi.dev

Vaša ukážka mi v IE nefunguje, musíte v dokumente zadať Doctype header, aby sa vaša stránka v IE vykreslila štandardným spôsobom a použila vlastnosť CSS content:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

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

</html>

Druhý spôsob je použiť selektory CSS 3

li:not(:last-of-type):after
{
    content:           " |";
}

Ale stále musíte špecifikovať Doctype

A tretím spôsobom je použitie JQuery s nejakým skriptom, ako je nasledujúci:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

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

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

Výhodou tretieho spôsobu je, že nemusíte zadávať doctype a jQuery sa postará o kompatibilitu.

BoltClock
BoltClock
Edited answer 21 december 2011 в 10:49
10