Wie man sich zuletzt versteckt

-1

Ich habe eine HTML ul li wie folgt aus:Wie man sich zuletzt versteckt | mit CSS?

<ul id="menu-footer-menu" class="menu"> 
    <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356"> 
     <a href="http://example.com/link1/">Title 1</a> 
     <span class="f_sep">|</span> 
    </li> 
    <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357"> 
     <a href="http://example.com/link2/">Title 2</a> 
     <span class="f_sep">|</span> 
    </li> 
    <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358"> 
     <a href="http://example.com/link3/">Title 3</a> 
     <span class="f_sep">|</span> 
    </li> 
</ul>

die Ausgabe wie diese

Title 1 | Title 2 | Title 3 |

So Throught CSS I | zuletzt ausblenden möchten. Ich habe versucht, diese aber es ist Hidding alle |

#menu-footer-menu .f_sep:last-child{display:none}

ich die letzte Ausgabe so wollen

Title 1 | Title 2 | Title 3

Bitte beachten Sie: meine Frage nicht zu this question verwandt ist, weil es wird | durch, Zugabe wurde aber ich habe bereits Rohr | in meinem HTML, also möchte ich nur das letzte Vorkommen ausblenden.

Quelle

2017-03-14 Promit

Mögliche Duplikat [Hinzufügen eines Rohrtrenner nach Artikel in einer ungeordneten Liste, es sei denn, dass Artikel der letzte auf einer Linie ist] ändern (http://stackoverflow.com/questions/9171699/add-a-pipe-separator-after-items-in-un-ordered-list-unless-that-item-is-the-la) – marmeladze

# menu-footer- Menü li: last-kind –

@ marmeladze: Bitte lesen Sie meine _Bitte Hinweis_ Abschnitt. Hoffe es ergibt Sinn. – Promit

Sie tun es falsch. Hier ist die richtige Antwort:

#menu-footer-menu li:last-child .f_sep{ display:none }

Quelle

2017-03-14 05:29:33

du versuchen:

ul li:last-child span { 
    display: none; 
}

Quelle

2017-03-14 05:29:59 Mers

-1

Sie sind nahe daran. Geh einfach mit Li-Elementen.

li:last-child span{ 
 
    display:none; 
 
    }

<ul id="menu-footer-menu" class="menu"> 
 
    <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356"> 
 
     <a href="http://example.com/link1/">Title 1</a> 
 
     <span class="f_sep">|</span> 
 
    </li> 
 
    <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357"> 
 
     <a href="http://example.com/link2/">Title 2</a> 
 
     <span class="f_sep">|</span> 
 
    </li> 
 
    <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358"> 
 
     <a href="http://example.com/link3/">Title 3</a> 
 
     <span class="f_sep">|</span> 
 
    </li> 
 
</ul>

Quelle

2017-03-14 05:32:16

#menu-footer-menu li:last-child .f_sep{ 
    display: none; 
}

Quelle

2017-03-14 05:33:12

verwenden CSS

#menu-footer-menu li:last-child .f_sep{display:none}

Quelle

2017-03-14 05:37:09

Besser noch mehr semantisches Markup verwenden und die Teiler mit CSS angezeigt

#menu-footer-menu{list-style:none; padding:0;} 
 

 
#menu-footer-menu li {display:inline-block;} 
 

 
#menu-footer-menu li:not(:last-child):after 
 
{ 
 
    content: "|"; 
 
}

<ul id="menu-footer-menu" class="menu"> 
 
    <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356"> 
 
     <a href="http://example.com/link1/">Title 1</a> 
 
    </li> 
 
    <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357"> 
 
     <a href="http://example.com/link2/">Title 2</a> 
 
    </li> 
 
    <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358"> 
 
     <a href="http://example.com/link3/">Title 3</a> 
 
    </li> 
 
</ul>

Dies hat den Vorteil, ist, dass Sie nur die Teiler mit CSS

Quelle

2017-03-14 05:41:07

Ich kann das nicht machen, weil das Plugin diesen Code erzeugt, also muss ich es nur über CSS entfernen; aber danke für deine Hilfe. Ich werde diesen Ansatz verwenden, wenn ich das "ul li" alleine machen muss. – Promit

Wie man sich zuletzt versteckt | mit CSS?

Antwort

Verwandte Themen