css多选择器解释

我正试着了解CSS。 我发现了一个导航菜单，我想使用，但有些东西还没有工作，有很多东西让我困惑

这部分代码中有两次出现李的原因吗

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

这部分我一点也不懂。 这是指仅针对选择器的悬停状态，还是针对ul、li和选择器的悬停状态

ul li a:hover + .hidden, .hidden:hover {
display: block;
}

我一直在关注w3schools的css教程，但我没有看到任何东西可以解释我不理解的东西。 完整代码在这里

/*horizontal navigation style*/
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul {
    position: static;
    display: none;
    }
    /*Create vertical spacing*/
    li {
    margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
    width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
    display:block;
    }
}

这意味着它将针对li ul中的所有元素。css始终应用于表达式中的最后一个选择器。见下面的例子

堆栈片段

李{ 颜色：蓝色； } 李宇莉{ 颜色：红色； } 菜单 子菜单 子菜单 子菜单 此代码表示有两个列表，其中一个包含另一个 首先，li是父母，术语“ul li”是其子列表 第一个li是基本菜单，另一个是下拉菜单

此代码表示有两种悬停情况 当鼠标悬停在列表中的ul li a上时

---

“隐藏”这个词在这里用+assignment来指代它并不难理解，只要把它看作是用空格分隔的“项目”，它的意思是，每个单词用空格分隔，它就是一个项目。然后，看到第一个项目是“父”项目，它的直接正确项目是它的子项目或内部项目，依此类推

因此，在您的第一个示例中：

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

你有li，然后是ul，然后是li，这意味着它在查找ul标签中的所有li标签，它在il标签中，从右到左读取。可能是这样的：

<li>
 <ul>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
 </ul>
</li>

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this don't cause it's not an immediate child </span>
  <a>
 </li>
</ul>

及

第一种方法是选择所有具有.hidden类的项，这些项直接是悬停的“a”标记的子项+，并且该“a”标记必须位于li标记内，随后必须位于ul标记内

可能是这样的：

<li>
 <ul>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
 </ul>
</li>

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this don't cause it's not an immediate child </span>
  <a>
 </li>
</ul>

最后，第二种情况更简单，它说，记住，从右到左阅读，选择鼠标悬停的所有项目和隐藏类。如果我们使用上述示例：

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this part is selected TOO if mouse hovers </span>
  <a>
 </li>
 <li class="hidden">
  this part is selected TOO if mouse hovers
 </li>
</ul>

---

希望我自己解释得很好

请也发布HTML代码。因为多个选择器可以组合在一起共享同一个声明，所以选择器必须用逗号分隔。只需查看列表中的最后一个选择器，然后从右向左读取。对于不同的模式，这里有一个很好的解读：

.hidden:hover

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this don't cause it's not an immediate child </span>
  <a>
 </li>
</ul>

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this part is selected TOO if mouse hovers </span>
  <a>
 </li>
 <li class="hidden">
  this part is selected TOO if mouse hovers
 </li>
</ul>