导航条形码信息

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 {
}

这将选择ID为“dog”

的元素中的<ul>个元素

#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

Answer 2

 #dog{
 }

是CSS id选择器。具有最高优先权。选择一个具有此id的唯一元素。

#dog ul {

}

选择id为'dog'的元素中的所有子元素ul元素

#dog ul li {
}

选择id为'dog'的元素中的所有子li元素

#dog li ul {
}

在id为'dog'的元素中选择li为父级的所有子元素ul元素 也优先于#dog ul

 #dog ul li a {
 }

选择所有子元素，其元素为'dog'

的元素中具有li作为父元素

#dog li:hover ul {

}

当li父元素在id为'dog'

的元素中悬停时，选择所有子元素ul

#dog li:hover li {
}

当li父元素悬停在id为'dog'

的元素中时，选择所有子li