css - 三行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 时。我不明白他们的意思。我尝试用谷歌搜索它，如果您知道关于这方面的任何好文章，我将不胜感激!

Answer 1

1- ul li a:hover瞄准悬停 a li 中包含的元素元素。这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 种不同类型元素的 2 个不同的 CSS 选择器。它们共享后面定义的相同样式。 2 个选择器是 #drop-nav ul li:hover和 ul li ul . ,选择器组 2 组合在一起并赋予它们相同的样式。

#drop-nav ul li:hover目标悬停 li ul 中包含的 s , 它包含在具有 id="drop-nav" 的元素中.

ul li ul目标 ul包含在 li 中的 s ，它包含在另一个 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 : >选择器是一个“直接子”选择器。整个目标 ul这是悬停的直接 child li元素，包含在 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>