解釋我們如何通過只使用一個父類來遍歷所有的個體li？

我想通過只使用一個父類遍歷所有個人li，例如：「這裏我們使用mainDiv」我們如何在css3中做到這一點？不在Jquery或JavaScript中。解釋我們如何通過只使用一個父類來遍歷所有的個體li？

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; 
     }

麻煩提及以下代碼

喜歡明智我想遍歷所述第二組UL>利的（A，B，C）通過僅使用一個父類名（mainDiv）。我怎樣才能通過css3來做到這一點？

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>

來源

2016-04-13 Sivarajan

如果我明白你的問題HTML代碼可能會有所幫助。

<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>

來源

2016-04-13 13:36:27 h0nza

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

此代碼將影響到「大膽」在第二UL所有華里。但我需要個人李。

例如：

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

這個代碼不影響第二里（即：「B」）。我級UL：第n個孩子（2）裏：第n個孩子（2 ） – Sivarajan

我不確定你在說'遍歷'時究竟在問什麼。但是，如果它匹配某些元素，那麼您提供的css幾乎可以滿足您的要求。

要mainDiv下匹配任何李：

.mainDiv li { 
    // my css 
}

在第二UL只有那些符合：

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

注意:last-child允許選擇mainDiv的最後一個孩子。其他的解決方案可能是使用（其中包括）ul:nth-child(2)或ul:nth-of-type(2)

來源

2016-04-13 13:36:47

解釋我們如何通過只使用一個父類來遍歷所有的個體li？

回答

相關問題