已经快15年没有做任何css了，事情确实发生了一些变化。 我正在查看下面的代码，但我似乎无法理解某些事情
这是原始标记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pseudo Classes & Pseudo Elements</title>
<link rel="stylesheet" href="style.css">
<style>
.dropdown-content a {
display: none;
}
.dropdown:hover .dropdown-content a {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<a href="#">Items</a>
<div class="dropdown-content">
<a href="#">item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
</div>
</div>
</body>
</html>
所以
如果它不对外部的"a"产生任何影响，为什么要影响这里的所有"a"？
.dropdown:hover .dropdown-content a {
display: block;
}
如果我只使用这个，我似乎也可以达到相同的结果：
/* .dropdown-content a {
display: none;
}
.dropdown:hover .dropdown-content a {
display: block;
} */
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content{
display: grid;
}
有什么问题吗？
我似乎也不明白为什么这根本不显示 3 个链接，我不明白为什么不设置"a"项的显示属性会阻止所有其他"a"显示。
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content a{
display: block;
}
新年快乐。
如果它不对外部的"a"产生任何影响，为什么要影响这里的所有"a"？
.dropdown:hover .dropdown-content a { display: block; }
对外部a标签没有预期的影响。因为样式仅应用于那些位于元素内的a标签，而dropdown-content而该元素又位于具有处于悬停状态的类dropdown的元素内。
它是根据css组合器：参考CSS/Building_blocks/选择器/组合器#descendant_combinator
<小时 />.dropdown-content { display: none; } .dropdown:hover .dropdown-content{ display: grid; }有什么问题吗？
由于dropdown-content中除了a之外没有其他元素，因此将所有元素隐藏在该容器内或隐藏该容器本身感觉相同。
我似乎也不明白为什么这根本不显示 3 个链接，我不明白为什么不设置"a"项的显示属性会阻止所有其他"a"显示。
.dropdown-content { display: none; } .dropdown:hover .dropdown-content a{ display: block; }
这只是更改子项的显示属性，即锚标记，但容器dropdown-content仍然display:none(即使在悬停状态下为dropdown)。因此，除非将容器dropdown-content的显示属性更改为none以外的正确值，否则不会显示锚标记。
你看不到'a'元素，因为你已经设置了display: none;它.
在原始标记中
.dropdown:hover .dropdown-content a {
display: block;
}
当您将鼠标悬停在.dropdown上方时，"a"设置为display: block;并显示。