html - 这些CSS行之间有什么区别

Question

#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}

1) "li.hover"和 "li:hover"有什么区别？

2) “ul ul li”到底是什么意思？为什么有 2 个“ul”元素？

Answer 1

li.hover 以 li 元素为目标，该元素也具有 hover 类，例如:

<li class="hover"></li>

li:hover 以任何 li 元素的悬停状态为目标。

ul ul li 以 ul 元素中的任何 li 元素为目标，而 ul 元素又位于 another ul 元素，像这样:

<ul>
  <li>
    <ul>
      <li>This is the element that would be targeted</li>
    </ul>
  </li>
</ul>