css - 导航条码信息

Question

经过几个小时的困难，我终于想出了如何在 CSS 中制作导航栏。但是，我不完全了解发生了什么。

例如我有以下内容:

#dog{
}

#dog ul
{
}

#dog ul li
{
 }

#dog li ul
{
}

#dog ul li a 
 {
 }

 #dog li:hover ul
{
}

#dog li:hover li
{
}

很明显，我在其中提供了信息，但我真的对我们拥有的不同数量感到困惑。例如。 “ul li a”，为什么我们不能将它们全部合而为一？有人可以简要解释一下每个人的作用吗？

干杯

Answer 1

#dog {
}

这会选择 id 为“dog”的元素

#dog ul {
}

这选择了 <ul> id 为“dog”的元素中的元素

#dog ul li {
}

这选择了 <li> <ul> 中的元素id 为“dog”的元素中的元素

#dog li ul {
}

这选择了 <ul> <li> 中的元素id 为“dog”的元素中的元素

#dog ul li a {
}

这选择了 <a> <li> 中的元素<ul> 中的元素id 为“dog”的元素中的元素

#dog li:hover ul {
}

这选择了 <ul> <li> 中的元素悬停在 <ul> 中的元素id 为“dog”的元素中的元素

#dog li:hover li {
}

这选择了 <li> <li> 中的元素悬停在 id 为“dog”的元素中的元素

我认为我做对了一切，但如果您觉得这令人困惑，我强烈建议您回顾一下基础知识，也许可以学习 codecademy course