0

我无法理解这些代码的含义 -

1) .main ul ul,
2) .main ul li:hover ul
3) .main ul li:hover ul
4) .main ul ul li:hover ul

这些代码用于隐藏或显示菜单和子菜单。了解 CSS 的人非常了解这些代码。我想了很多，但不能清楚地理解！这是因为上面的代码是以这种方式应用的—— 

.main ul ul,
.main ul li:hover ul ul 
{display: none;}

然后又—— 

.main ul li:hover ul,
.main ul ul li:hover ul
{display:block;}

我的问题是，如果是 2 ul，我们只使用“.main ul ul”，然后在下一行我们使用悬停。
但是如果不悬停，我们怎么能得到 2 ul 呢？我的意思是它应该是 ul:hover ul 在第一行，不是吗？
此外，如果前 2 行（即 - .main ul ul，.main ul li:hover ul ul ）用于 display:none ，那么为什么相同的 2 行不用于 display:block ？？？因为它们应该暗示相同的子菜单？

这里 .main 是一个像这样的 div 类-

 <div class="main">
  <ul>
    <li>..</li>
    <li>..</li>
     <li>..</li>
        <ul>
           <li>sub-menu1</li>
           <li>sub-menu2</li>
        .
        . 
        .
     </ul> etc etc...
<div>

实际上这是一种带有子菜单的垂直列表菜单。希望大家明白我的意思。简单来说，我的问题是这个问题开头的前 4 行代码是什么意思？请详细解释。提前致谢

4

3 回答 3

0

编辑：感谢您编辑您的原始帖子 - 我将尝试回答您的更多问题：

问题：

如果是 2 个 ul，我们只使用“.main ul ul”，然后在下一行我们使用悬停。但是如果不悬停，我们怎么能得到 2 ul 呢？

您想知道为什么只在第二个无序列表 (UL) 上调用悬停属性，以及如何在没有悬停属性在第一个 ul 上的情况下显示第二个 ul。答案是这些无序列表默认是可见的。因此，它们都将在页面加载时显示。hover 属性只是告诉您的页面在用户将鼠标悬停在第二个列表上时如何做出反应。

我不完全确定你的问题，以及它在问什么。如果你想知道每个 CSS 属性在做什么，我可以帮助解释一下。您的 DIV 容器的类名称为.main.

1) .main ul ul- 这似乎是在另一个无序列表中调用一个无序列表，该无序列表是“.main”类的一部分。

2) .main ul li:hover - 这是调用第一个无序列表中一个列表项的悬停属性。

因此，基本上每一行都指的是不同的项目，或项目中的不同属性（都在.mainDIV 中）。

于 2011-08-09T12:20:07.287 回答
0

1) .main ul ul 指：

<div class="main">
    <ul>
        <li>
            **<ul>** ... **</ul>**
            **<ul>** ... **</ul>**
        </li>
    </ul>
    ...
</div>

2) .main ul li:hover ul ul 指的是以下内容，仅当鼠标在第一级<li>（标有 1 个星号）上时，请注意这<ul>是上一个示例更深的另一个级别

<div class="main">
    <ul>
        *<li>*
            <ul>
                <li>
                    **<ul>**...**</ul>**
                    **<ul>**...**</ul>**
                </li> 
            </ul>
            <ul> ... </ul>
        *</li>*
    </ul>
    ...
</div>

3) .main ul li:hover ul 指的是**<ul>**当你的鼠标在*<li>*

<div class="main">
    <ul>
        *<li>*
            **<ul>**
                .
                .
                . 
            **</ul>**
            **<ul>** ... **</ul>**
        *</li>*
    </ul>
    ...
</div>

4) .main ul ul li:hover ul 指的是**<ul>**当你的鼠标悬停*<li>*在最后一个例子中时，请注意<li>现在更深的级别是如何响应鼠标的焦点：

<div class="main">
    <ul>
        <li>
            <ul>
                *<li>*
                    **<ul>**...**</ul>**
                    **<ul>**...**</ul>**
                *</li> *
            </ul>
            <ul> ... </ul>
        </li>
    </ul>
    ...
</div>
于 2011-08-09T12:35:11.357 回答
0

一步步。我们先来看看

  .main ul ul, .main ul li:hover ul ul {display: none;}

它的作用是隐藏所有嵌套列表。请注意，可能存在类似 thisd" 的内容：

<ul id="first">
 <li>
  <ul id="second">
   <li>
     <ul id="third">
        ...

“第三”列表也满足“ul ul”。你能看到，那个“第三”在“第二”里面吗？没关系，这只是一开始。和你输入的一样

  div{ ... }

它将适用于每个 div，无论它是否在任何其他元素内。

  div div{ ... } would apply to all elements in such structure:

 <any number of any tags>
  <div>
   <optional any number of any tags>
    <div class="applied">
      <div class="applied">
        ....
         <div class="applied">

好的，这很容易。现在，.main ul li:hover ul ul 遵循相同的模式，但它从 li:hover 开始计数。想象一下，您有 5 级菜单，并且您将 li 悬停在第三级内。那么这个公式所做的就是简单地隐藏第五层。

于 2011-08-09T12:42:54.483 回答