解释三条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个不同的CSS选择器，它们针对2种不同类型的元素。它们共享相同的样式。 2个选择器是#drop-nav ul li:hover和ul li ul。 ,选择器组2组合在一起并为它们提供相同的样式。

#drop-nav ul li:hover定位li中包含的hover-ed ul，其中包含id="drop-nav"元素。

ul li ul定位ul中包含的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：>选择器是“直接子”选择器。整个事件定位ul s，它是悬停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>

Answer 2

1. ul li a:hover

当鼠标悬停在元素<a></a>

内时，它意味着元素ul li的css工作

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

当鼠标悬停在内容为<li></li>的元素内并且也适用于drop-nav ul li内具有相同css的元素<ul></ul>

时，css为元素ul li工作

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

符号>表示css仅适用于ul，其中1级低于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

1. 仅当光标位于<a>标记区域
时才适用于未编号列表元素中的链接
2. 如果列表父级已指定id且所有未编号的第二级列表
，则应用于悬停列表元素
3. 第二级的Appleid列出第一级列表的父元素是否已指定id且游标是否超过第一级（父级）列表元素

如果您看到多个列表，则表示存在子级别。如果可能的话，请使用类而不是id。