格式第二個孩子從一個列表項目

我有一個ul項目，其中我有2個更多ul項目。我需要格式化ul中的第二行。格式第二個孩子從一個列表項目

HTML

<ul class="horizontal"> 
    <li>First List 
    <ul class="ul1"> 
     <li>first</li> 
     <li>Second</li> 
     <li>Third</li> 
    </ul> 
    <li>Second List 
    <ul> 
     <li>first</li> 
     <li>Second</li> 
     <li>Third</li> 
    </ul> 
</ul>

CSS

.horizontal >li { 
    float: left; 
    list-style: none; 
    margin: 10px; 
} 

ul:nth-child(2) { 
    color:RED 
}

來源

2014-01-13 user1050619

難道'李：第n-的式（2）'工作？ –

您的代碼中有不同的選擇器，並且在提琴中使用了不同的選擇器，因此請確保相應地編輯問題:) –

您需要使用下面的選擇..

ul > li > ul > li:nth-of-type(2) { 
    color: red; 
}

Demo

說明：上述選擇裝置選擇ul元件，少動和以及選擇嵌套ul下直接li，比前進和選擇嵌套li下直接ul和比在結束時，我們選擇了第二li嵌套在第二級ul。

而且，只有li元素可以被嵌套在ul作爲直接兒童裏面，你也可以使用nth-child太

來源

2014-01-13 17:06:39

想知道爲什麼此答案未被接受爲答案！：\ – NoobEditor

Mr. Alien是正確的，但不是使你的CSS非常具體，你能不能只使用一個類上ul或者甚至是li。這將使您的CSS在未來更易於管理/覆蓋。

請務必記住，閱讀CSS並應用它時，瀏覽器從右向左工作。

例

<ul class="horizontal"> 
    <li>First List 
    <ul class="ul1 nested-list"> 
     <li>first</li> 
     <li class="list-item-red">Second</li> 
     <li>Third</li> 
    </ul> 
    </li> 
    <li>Second List 
     <ul class="nested-list"> 
      <li>first</li> 
      <li class="list-item-red">Second</li> 
      <li>Third</li> 
     </ul> 
    </li> 
</ul> 

.list-item-red { color: red; }

來源

2014-01-13 17:17:57

不，我們不能具體說明並聲明這些類是否是動態生成的。 –

我認爲這是可能的，如果不是'li'級別，那麼肯定是嵌套'ul' –

爲什麼你的代碼是不工作的原因是因爲你選擇:nth-child UL，而不是LI。僞選擇器（如：nth's）在你當前的選擇器上工作，而不是它的子項。這對於像:first-child和:nth-child相當混亂，但請記住它是這樣的：something:is，像a:hover

來源

2014-01-13 17:23:45

格式第二個孩子從一個列表項目

回答

相關問題