Question

我的菜单中有一个嵌套列表，我希望在突出显示父列表时突出显示子列表的第一个孩子。我只想使用CSS（SCSS文件格式）对此进行编码。这是列表中的列表。我在另一个

的另一个列表项下面有列表项

<ul id="sub-list">                                               
      <li class="sub-list-item">                                                                 
        <a href="#"><span>창업교육</span></a>   <!--serves as the parent when this is highlighted, the first child is also highlighted.-->                                                                   
          <ul class="sub-sub-list"> <!--sublist-->                                                                       
            <li class="item"><a href="#" class="sub-sub-title">창업정규교과</a></li>                                                                           
            <li class="item"><a href="#" class="sub-sub-title">창업비정규교과</a></li> 
          </ul>
      </li> 
      <li class="sub-list-item">
         <span>this is another list item in class="sub-list"</span>
      </li>                                                  
    </ul>

* EDIT：更改了此问题中使用的某些单词，以使该单词易于理解。并在.sub-list中添加了另一个子项，以更好地理解该问题。

Answer 1

“ span”（<a>）实际上不是父母。这是一个兄弟姐妹。子列表中第一个孩子（列表项）的父对象是<ul class="sub-sub-list">。那意味着他们是兄弟姐妹。

您可以使用+选择器来定位兄弟姐妹：https://www.w3schools.com/cssref/css_selectors.asp

.sub-list-item a:hover + ul > li:first-child {
  background-color: lightgrey;
}

<ul id="sub-list">
  <li class="sub-list-item">
    <a href="#"><span>창업교육</span></a>
    <!--serves as the parent when this is highlighted, the first child is also highlighted.-->
    <ul class="sub-sub-list">
      <!--sublist-->
      <li class="item"><a href="#" class="sub-sub-title">창업정규교과</a></li>
      <li class="item"><a href="#" class="sub-sub-title">창업비정규교과</a></li>
    </ul>
  </li>
</ul>

悬停另一个元素时的嵌套列表项

1 个答案: