Erklären Sie, wie können wir alle einzelnen li durchlaufen, indem Sie nur eine Elternklasse verwenden?

Ich möchte alle individuellen li durchqueren mit nur einer Elternklasse zB: "hier verwenden wir mainDiv" Wie können wir das in css3 tun? nicht in Jquery oder Javascript.Erklären Sie, wie können wir alle einzelnen li durchlaufen, indem Sie nur eine Elternklasse verwenden?

css: 
    .mainDiv ul li:nth-child(1){ 
     color:red; 
    } 
    .mainDiv ul li:nth-child(2){ 
      color:blue; 
     } 
    .mainDiv ul li:nth-child(3){ 
      color:yellow; 
     }

freundlich unten Code

Wie weise erwähnen möchte ich den zweiten Satz von ul> li (a, b, c) zu durchqueren, um nur ein Elternteil Klassennamen (mainDiv) verwenden. Wie kann ich das mit CSS3 machen?

HTML:

<div class="mainDiv"> 

    <ul> 
    <li>x</li> 
    <li>y</li> 
    <li>z</li> 
</ul> 

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
</ul> 

</div>

Quelle

2016-04-13 Sivarajan

Wenn ich Ihre Frage HTML-Code verstehen könnte hilfreich sein.

<head> 
    <style> 
     /* all list items will be blue */ 
     .my-class li { 
      color: blue; 
     } 

     /* only second list will be bold */ 
     .my-class ul:nth-child(2) li { 
      font-weight: bold; 
     } 

     /* all third list items will be underline */ 
     .my-class ul li:nth-child(3) { 
      text-decoration: underline; 
     } 
    </style> 
</head> 
<body> 
    <div class="my-class"> 
     <ul> 
      <li>x</li> 
      <li>y</li> 
      <li>z</li> 
     </ul> 

     <ul> 
      <li>a</li> 
      <li>b</li> 
      <li>c</li> 
     </ul> 
    </div> 
</body>

Quelle

2016-04-13 13:36:27 h0nza

 /* only second list will be bold */ .my-class ul:nth-child(2) li { font-weight: bold; }

Dieser Code wird die "fett" für alle li in der 2. ul beeinflussen. aber ich brauche individuelle li.

zB:

/* only second list will be bold */ .my-class ul:nth-child(2) li:nth-child(2) { color:red; }

dieser Code nicht den zweit li beeinflussen (zB: "b") .my-Klasse ul: n-te-Kind (2) li: n-Kind (2) – Sivarajan

Ich bin mir nicht sicher, was genau du fragst, wenn du 'traversing' sagst. Aber wenn es bestimmte Elemente zusammenbringt, macht das CSS, das du zur Verfügung gestellt hast, fast das, wonach du verlangst.

Um eine li unter mainDiv entsprechen:

.mainDiv li { 
    // my css 
}

nur auf diejenigen in der zweiten ul entsprechen:

.mainDiv ul:last-child li { 
    // my css 
}

Beachten Sie, dass :last-child das letzte Kind von mainDiv auswählen können. Andere Lösungen hätten zu verwenden gewesen (unter anderem) ul:nth-child(2) oder ul:nth-of-type(2)

Quelle

2016-04-13 13:36:47

Erklären Sie, wie können wir alle einzelnen li durchlaufen, indem Sie nur eine Elternklasse verwenden?

Antwort

Verwandte Themen