三 css 行的解释

Question

谁能帮我解释一下这三者的区别：

1.  ul li a:hover
2.  #drop-nav ul li:hover , ul li ul 
3.  #drop-nav ul li:hover > ul

最难的部分是当有多个ul和li时。我不明白他们的意思。我试过 google 它，如果你知道任何关于这方面的好文章，我将不胜感激！

Answer 1

1- ul li a:hover 定位包含在 li 元素中的悬停 a 元素。此 li 元素必须依次包含在 ul 元素中。简而言之，它的目标是这样的：

<ul>
    <li>
        <a>This element satisfy "ul li a:hover"</a>
    </li>
</ul>

或者这个：

<ul>
    <li>
        <div>
            <a>This element also satisfy "ul li a:hover"</a>
        </div>
    </li>
</ul>

请注意第二个示例中的 <a> 标签为何不是 <li> 标签的直接子标签？只要它包含在 <li> 标记中，选择器仍然会得到满足。

2- #drop-nav ul li:hover , ul li ul 是 2 个不同的 CSS 选择器，它们针对 2 种不同类型的元素。它们共享后面定义的相同样式。 2 个选择器是 #drop-nav ul li:hover 和 ul li ul。 , 选择器组 2 组合在一起并赋予它们相同的样式。

#drop-nav ul li:hover 以 ul 中包含的悬停 li 为目标，ul 包含在具有 id="drop-nav".

的元素中

ul li ul 目标 ul 包含在 li 中，而 li 包含在另一个 ul.

中

所以要么这样：

<div id="drop-nav">
    <ul>
        <li>This element satisfy "#drop-nav ul li:hover", so it also satisfy "#drop-nav ul li:hover , ul li ul"</li>
    </ul>
</div>

或者这个：

<ul>
    <li>
        <ul>This element satisfy "ul li ul", so it also satisfy "#drop-nav ul li:hover , ul li ul"</ul>
    </li>
</ul>

将满足您的选择。

3- #drop-nav ul li:hover > ul：> 选择器是 "direct child" 选择器。整个目标 uls 是悬停的 li 元素的直接子元素，它包含在 ul 中，而 ul 又包含在带有 id="drop-nav" 的元素中.意思是 html 是这样的：

<div id="drop-nav">
    <ul>
        <li>
            <ul>This element satisfies "#drop-nav ul li:hover > ul"</ul>
        </li>
    </ul>
</div>

注意这次不满足规则:

<div id="drop-nav">
    <ul>
        <li>
            <div>
                <ul>This element does NOT satisfy "#drop-nav ul li:hover > ul"</ul>
            </div>
        </li>
    </ul>
</div>

因为 ul 不是 li 的直接子代。它的直接父级是 <div>

Answer 2

1. ul li a:hover

这意味着当鼠标悬停在元素 ul li

内部时，css 为元素 <a></a> 工作

2.  #drop-nav ul li:hover , ul li ul

这意味着当鼠标悬停在 ID 为 drop-nav ul li 的内部元素上时，css 对元素 <li></li> 起作用，并且对 ul li 内部的元素 <ul></ul> 也起作用css

3.  #drop-nav ul li:hover > ul

符号 > 表示 css 仅适用于 ul 低于 li:hover 一级或与 li:hover

内联

Answer 3

`ul li a:hover`

当您将鼠标悬停在这个 a 元素上时，就会出现这种样式。

<ul>
  <li>
    <a href="#">This link will change on hover</a>
  </li>
</ul>

`#drop-nav ul li:hover , ul li ul`

逗号分隔两个不同的选择器。第一个是这样的：

<div id="drop-nav">
  <ul>
    <li>This li will change on hover</li>
  </ul>
</div>

第二个是这样的：

<ul>
  <li>
    <ul>This is a nested unordered list</ul>
  </li>
</ul>

`#drop-nav ul li:hover > ul`

此样式仅影响选择器的直接 ul 子级。

<div id="drop-nav">
  <ul>
    <li>
      <ul>This ul is affected when the li is hovered.</ul>
    </li>
  </ul>
</div>

<div id="drop-nav">
  <ul>
    <li>
      <p>
        <ul>This ul is NOT affected when the li is hovered.</ul>
      </p>
    </li>
  </ul>
</div>

Answer 4

仅当光标位于 <a> 标记区域上时才适用于未编号列表元素中的链接
如果列表父级指定了 id，则适用于悬停的列表元素，并且适用于所有未编号的二级列表
如果一级列表的父元素指定了 id 且光标位于一级（父）列表元素上方，则二级列表的 Appleid

如果您看到不止一个列表，则表示存在子关卡。如果可能，请使用类而不是 id。

三 css 行的解释

Explanation of three css lines

css

html-lists

`ul li a:hover`

`#drop-nav ul li:hover , ul li ul`

`#drop-nav ul li:hover > ul`