Hinzufügen aller Listenelemente zu einer einzelnen Klasse

Anstatt eine einzelne Klasse zu jedem Listenelement hinzuzufügen, gibt es eine Möglichkeit, einer ganzen Gruppe von Listenelementen gleichzeitig eine einzelne Klasse hinzuzufügen.Hinzufügen aller Listenelemente zu einer einzelnen Klasse

CSS

<li class="foot_nav">Home</li> 
<li class="foot_nav">Discovery</li> 
<li class="foot_nav">Subjects</li> 
<li class="foot_nav">Guide</li> 
<li class="foot_nav">About us</li>

Dank

Quelle

2017-02-14 Manoj

ja, können Sie verwenden: nt-Kind –

Sie so viel Antwort bekommen ..accept ein und schließen Sie die Frage –

Ich habe keine Ahnung, was die Frage mehr ist .. „Nest große Liste in einzelne Liste“ ? Was meinst du damit? – Esko

gelten die Klasse auf die gesamte ul und dann Targeth die ul li mit CSS

.foot_nav{list-style:none} 
 

 
.foot_nav li:nth-child(even) {background:red} 
 

 
.foot_nav li:nth-child(odd) {background:yellow}

<ul class="foot_nav"> 
 
    <li>Home</li> 
 
    <li>Discovery</li> 
 
    <li>Subjects</li> 
 
    <li>Guide</li> 
 
    <li>About us</li> 
 
</ul>

<ul class="foot_nav"> 
    <li>Home</li> 
    <li>Discovery</li> 
    <li>Subjects</li> 
    <li>Guide</li> 
    <li>About us</li> 
</ul> 

//css 
.foot_nav li{//styling}

Quelle

2017-02-14 10:07:46 gavgrif

das hat nicht gut funktioniert, als ein Beispiel, wenn Sie Hintergrundfarbe anwenden, wird es als einzelner Balken, nicht als einzelner Hintergrund für jedes Listenelement angezeigt. – Manoj

@Manoj Wijesooriya - Antwort aktualisiert, um zu zeigen, wie Sie verschiedene Hintergründe für die ul li haben können – gavgrif

Es ist nur eine Möglichkeit - JS. JQuery zum Beispiel:

$('li').addClass('foot_nav');

Quelle

2017-02-14 10:08:23

Fügen Sie einfach eine Klasse zu Eltern und Verwendung Kindselektor:

.foot_nav li { 
 
    display: inline-block; 
 
}

<ul class="foot_nav"> 
 
    <li>Home</li> 
 
    <li>Discovery</li> 
 
    <li>Subjects</li> 
 
    <li>Guide</li> 
 
    <li>About us</li> 
 
</ul>

Quelle

2017-02-14 10:08:51 Esko

Was brauchen Sie es?

Vielleicht sollten Sie die Klasse zu ihrem Eltern hinzufügen.

<ul class="foot_nav"> 
<li></li> 
… 
</ul>

Quelle

2017-02-14 10:08:52 18zehn

.foot_nav 
 
{ 
 
    list-style-type:none; 
 

 
} 
 
.foot_nav li 
 
{ 
 
display:inline-block; 
 
}

<ul class="foot_nav"> 
 
<li >Home</li> 
 
<li >Discovery</li> 
 
<li >Subjects</li> 
 
<li >Guide</li> 
 
<li >About us</li> 
 
</ul>

Quelle

2017-02-14 10:10:42

So etwas wie dies in JavaScript sollte es tun:

var lis = document.querySelectorAll("li"); 

for(var i = 0; i < lis.length; i++){ 
    lis[i].className = lis[i].className += " foot_nav" 
}

Quelle

2017-02-14 10:11:08

dieses Versuchen

.list-item li{ 
 
} 
 

 
.list-item:nth-child(1){ 
 
} 
 
.list-item:nth-child(2){ 
 
}

<ul class="list-item"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Quelle

2017-02-14 10:11:56 Momin

Hinzufügen aller Listenelemente zu einer einzelnen Klasse

Antwort

Verwandte Themen