CSS：隱藏UL的第一列表項與第二深度

我有以下結構的導航...CSS：隱藏UL的第一列表項與第二深度

<ul role="navigation"> 
    <li class="page_item page-item-2"> 
     <a href="#">Sections</a> 
     <ul class="children"> 
      <li class="page_item"><a href="#">One</a></li> 
      <li class="page_item"><a href="#">Two</a></li> 
      <li class="page_item"><a href="#">Three</a></li> 
     </ul> 
    </li> 
    <li class="page_item page-item-6"> 
     <a href="#">About</a> 
     <ul class="children"> 
      <li class="page_item"><a href="#">Contact</a></li> 
      <li class="page_item"><a href="#">Members</a></li> 
      <li class="page_item"><a href="#">Become Member</a></li> 
      <li class="page_item"><a href="#">Whatever</a></li> 
     </ul> 
    </li> 
</ul>

如何隱藏每個<a>的外部列表元素中的第一次亮相？對我來說，我在談論<a href="#">Sections</a>和<a href="#">About</a>

我想

ul li > a { display:none; }

或

ul > li > a { display:none; }

應該做的伎倆，但它隱藏的一切。

來源

2013-03-15 matt

這是因爲所有的a都是li的孩子，他們是ul的孩子。

你的頂級ul有role="navigation"，所以你可以選擇：

ul[role="navigation"] > li > a { display:none; }

來源

2013-03-15 10:14:18 BoltClock

什麼是角色屬性btw？ – defau1t 2013-03-15 10:16:07

@ defau1lt：這是一個HTML5屬性。 – BoltClock 2013-03-15 10:23:07

@Dipesh Parmar：他們也會選擇他們。 – BoltClock 2013-03-15 10:23:32

我認爲最簡單，最有效的方法是添加類像.hidden {display: none;}，但你也可以添加一個類外ul，然後：

.ul-outer-class > li > a { display: none; }

它也比使用屬性選擇更高效。

來源

2013-03-15 10:47:13

CSS：隱藏UL的第一列表項與第二深度

回答

相關問題