如何正确构造具有多个子级别的列表

我有一个使用li和ul标签制作的大型导航菜单。我遇到的问题是，如果我尝试对单个项目进行样式设计，它会变得非常具有挑战性，因为每个li标签都有多个ul和li元素，因此样式会应用于其中的所有元素。例如，我试图突出显示第一个列表项“SharePoint演示网站”，但第一个项目包含所有其他项目，这是一个可扩展/可折叠菜单）。如何正确构造具有多个子级别的列表

HTML：

<ul id="expList" class="list"> 
    <li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active">Sharepoint Demo Website 
     <ul style="display: block;"> 
      <li title="Academic" value="https://demo.ca/academic" class="collapsed">Academic 
       <ul style="display: none;"> 
        <li title="Board Meetings" value="https://demo.ca/academic/bm">Board Meetings</li> 
        <li title="Committee" value="https://demo.ca/academic/cmtte">Committee</li> 
        <li title="Document Management" value="https://demo.ca/academic/dm">Document Management</li> 
        <li title="Project Management" value="https://demo.ca/academic/pm">Project Management</li> 
       </ul> 
      </li> 
      <li title="Archive" value="https://demo.ca/archive">Archive</li> 
      <li title="Associations" value="https://demo.ca/associations" class="collapsed">Associations 
       <ul style="display: none;"> 
        <li title="Board Meetings" value="https://demo.ca/associations/bm">Board Meetings</li> 
        <li title="Document Management" value="https://demo.ca/associations/dm">Document Management</li> 
        <li title="Project Management" value="https://demo.ca/associations/pm">Project Management</li> 
       </ul> 
      </li> 
      <li title="Developer" value="https://demo.ca/cdn">Developer</li> 
      <li title="Person test" value="https://demo.ca/cf_test">Person test</li> 
      <li title="Charity" value="https://demo.ca/charity" class="collapsed">Charity 
       <ul style="display: none;"> 
        <li title="Board of Directors" value="https://demo.ca/charity/bod" class="collapsed">Board of Directors 
         <ul style="display: none;"><li title="Board Documents" value="https://demo.ca/charity/bod/boarddocs">Board Documents</li> 
          <li title="Meeting Materials" value="https://demo.ca/charity/bod/mtgmaterial">Meeting Materials</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li title="demo" value="https://demo.ca/clite" class="collapsed">demo 
       <ul style="display: none;"><li title="administrator" value="https://demo.ca/clite/admin">administrator 
       </li> 
      </ul> 
     </li> 
     <li title="Company" value="https://demo.ca/company" class="collapsed">Company 
      <ul style="display: none;"><li title="Finance" value="https://demo.ca/company/finance">Finance</li> 
       <li title="Human Resources" value="https://demo.ca/company/hr" class="collapsed">Human Resources 

         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

CSS：

#expList ul li:hover{ 
    background-color: #eee; 
}

这是什么样子：

enter image description here

这是创建列表的代码：

来源

2013-10-21 Batman

我强烈建议使用类名，而不是试图依赖HTML结构和通过'>'进行定位。您将通过维护和调试节省大量时间。 – jbenjohnson

我并不反对，我可能不得不改变列表的生成方式。 – Batman

您可以使用>只影响直接孩子，像这样：

#expList ul > li:hover{ 
    background-color: #eee; 
}

或本：

#expList > ul > li:hover{ 
    background-color: #eee; 
}

或使用:first-child伪选择器只是第一个孩子：

#expList ul li:first-child:hover 
{ 
    background-color:yellow; 
}

取决于你想要什么。你也可以使用类名。

来源

2013-10-21 14:35:28 mayabelle

对不起，我可能不够清楚。我需要在悬停时对每个li项目进行样式设置。不只是第一个。所以基本上任何单个项目都应该被设计。我认为你的解决方案只适用于第一项。 – Batman

你现在所拥有的，它不会工作，因为整个节点将得到突出显示你需要做的的方式，就是给一个额外的标记到文本你想的亮点，例如：

<li title="Academic" value="https://demo.ca/academic" class="collapsed"> 
<span>Academic</span> 
    <ul style="display: none;"> 
      <li title="Board Meetings" value="https://demo.ca/academic/bm">Board Meetings</li> 
      <li title="Committee" value="https://demo.ca/academic/cmtte">Committee</li> 
      <li title="Document Management" value="https://demo.ca/academic/dm">Document Management</li> 
      <li title="Project Management" value="https://demo.ca/academic/pm">Project Management</li> 
     </ul> 
</li>

则：

#expList ul > li:hover > span{ 
    background-color: #eee; 
}

来源

2013-10-21 14:37:40 OneOfOne

鉴于<li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active">包含一个文本节点和儿童元素，是风格li也将适用于它的子规则。

如果要独立设置文本节点（“Sharepoint演示网站”）的样式，则必须将其包装在可以专门定位的元素中。

<ul id="expList" class="list"> 
    <li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active"> 
    <span>Sharepoint Demo Website</span> 
    <ul style="display: block;"> 
     <li title="Academic" value="https://demo.ca/academic" class="collapsed">Academic 
     <ul style="display: none;">

您现在可以通过span

#expList li > span { 
    background-color:#fee; 
}

应用规则的文本节点见jsfiddle。

来源

2013-10-21 14:41:12

嗯所以，而不是定位列表项目，我瞄准的跨度，似乎是一个好主意，我会尝试修改Javascript以创建跨文本项目的跨度 – Batman

如何正确构造具有多个子级别的列表

回答

相关问题