显示具有相同类的下一个元素，数组的断点结尾

Question

我有一个具体的问题。 这是我的 HTML 结构：

<ul class="dropdown">
    <li class="level-1">Element 1 Level 1</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-1">Element 3 Level 1</li>
</ul>

现在，在 Element 1 Level 1 悬停时，我需要在其旁边显示具有类 level-2 的元素。断点是二级类数组的结尾。

预期结果显示每个 li 和文本元素 1 级别 2

问题：

li.level-1 + li.level-2 { display: block; }

它只会显示下一个元素，而不是level-2类的每个元素。

这需要像具有嵌套级别的下拉菜单一样工作，但具有这种结构。

问题是我只需要使用 CSS 或 CSS3 来解决这个问题。

Answer 1

你可以像在这个小提琴https://jsfiddle.net/nileshmahaja/7nhy0yvn/中一样在CSS中使用~选择器

CSS

ul li {
    display:none;
}

ul li:first-child {
    display:block;
}

ul li:hover ~ li.level-2 {
    display:block;
}

Answer 2

通常人们会将较低级别的项目放在 li-item 内的单独 ul 中。您给出的示例是非常糟糕的做法，因为只有人类才能弄清楚它实际上是深度较低的级别

但是你应该能够做到以下几点：

.level-2 {
    display:none;
}

.level-1:hover ~ .level-2 {
    display: block;
}

.level-1:hover ~ .level-1 ~ .level-2 {
    display: none;
}

~ 表示 此项目之后的所有项目（如 x） 所以.level-1:hover ~ .level-2 表示

悬停的 .level-1 项目之后的所有 .level-2 项目

下一个语句.level-1:hover ~ .level-1 ~ .level-2 用于在另一个.level-1 项目之后隐藏带有.level-2 的项目。

注意：这对您没有多大帮助，因为您将永远无法到达较低深度的项目，因为当您将它们悬停时它们会消失。

编辑：另外，这只适用于相对较新的浏览器。

一个好的树标记应该是：

<ul>
  <li>
    <a>first level link</a>
    <ul>
      <li>
        <a>second level link</a>
      </li>
    </ul>
  </li>
</ul>

那么标记会更容易并且可以跨浏览器工作：

ul ul li {display:none;}
li:hover ul {display:block;}