Javascript 第一个孩子似乎不一致

我想选择所有

span

元素，这些元素是元素

li:first child

和元素

a

的后代

在菜单1下，我的选择器也选择子菜单1.7和1.8，但在菜单2下，它按预期工作。但是，菜单1和菜单2具有相同的结构

多谢各位。 安迪

我的小提琴：

。小型导航下拉菜单li：第一个孩子a span{
颜色：#000；
}
保险商实验室{
列表样式：无；
}
跨度{
颜色：#fff；
字体大小：粗体；
}
.主导航下拉列表项文本{
显示：块；
填充顶部：10px；
垫底：10px；
字号：1rem；
文本转换：大写；
颜色：#fff；
字体大小：粗体；
}

标题
背景色：rgb（36204151）；“>

。小型导航下拉菜单li：第一个孩子

表示：

查找

。小导航下拉菜单

，并在其中获取任何

，作为其父项的第一个子项

所以，它也适用于您的子菜单是可以理解的。应使用直接子运算符：

。小型导航下拉菜单>li:第一个孩子

让我们仔细看看。您有以下选择器：

.small-nav-dropdown-menu li:first-child

正如另一个人所提到的，这意味着将选择作为

：其自身父项的第一个子项的任何
li
元素。它自己的父母对你来说意味着什么？你的结构导致了一些不必要的行为。此图将使您了解为什么它不能按预期工作

div.small-nav-dropdown-menu
|-- ul
    |-- li // (Parent li) Aha! This is targeted with li:first-child because it is the first child of the above ul
    |   |-- ul
    |       |-- li -> a -> span
    |       |   // The above ^ span will be colored because the parent li 
    |       |   // (the one with "Aha!") has been targeted by the CSS
    |       |   // This li is also a target of li:first-child because it is the first child of the ul
    |       |-- li -> a // Not colored because the CSS doesn't detect span
    |       |   ... // A lot of li -> a
    |       |-- li -> a -> span
    |       |   // The above ^ span will be colored, again! This is because the parent li ("Aha!") is targeted
    |       |   // However, this time, the li wasn't targeted
    |       |-- li -> a -> span // Span will also be colored because the "Aha!" li is targeted!
    |
    |-- li // (Parent li) Okay, this is the second child, so it isn't targeted with li:first-child
        |-- ul
            |-- li -> a -> span
            |   // The above ^ span will be colored, but not because of the "Aha!" li
            |   // It is colored because the containing li is indeed the first child of the above ul
            |-- li -> a // Not colored because no span
            |   ... // A lot of li -> a
            |-- li -> a -> span
            |   // Not colored! Why? Containing li isn't first-child and the parent li, unlike the previous parent li,
            |   // isn't marked by li:first-child :O So this is why it isn't colored
            |-- li -> a -> span // Also not colored

那么解决办法是什么呢？更改选择器或HTML结构。下面是一个改变CSS的有效解决方案


。小型导航下拉菜单ul li li:第一个孩子a span{
颜色：#000；
}
保险商实验室{
列表样式：无；
}
跨度{
颜色：#fff；
字体大小：粗体；
}
.主导航下拉列表项文本{
显示：块；
填充顶部：10px；
垫底：10px；
字号：1rem；
文本转换：大写；
颜色：#fff；
字体大小：粗体；
}

标题
背景色：rgb（36204151）；“>



































下面是一个只选择子菜单的示例li：第一个孩子只是一个提示：当问问题时，确保以实际问题结束，以便更清楚地了解您需要什么；-）很抱歉。所以我的问题是，我想选择子菜单1.1和2.1，但现在它选择1.1、1.7、1.8和2.1。别担心，但请确保以问题的形式将其包含在您的原始帖子中。例如，当选择器应该只选择1.1和2.1时，为什么还要选择子菜单1.7和1.8？看看下面我的文章，我相信你会明白的；-）非常感谢。下次我将提出一个更好的问题。它在子菜单1上工作（它选择1.1、1.7和1.8），但在子菜单2上不工作。未选择子菜单2.6和2.7。您知道您的HTML，只需在必要时使用
运算符即可实现所需功能。太棒了，非常感谢您的全面解释。我不认为来自第一个ul的第二个父级li已经被认为不是第一个li，它实际上是它下面任何一个a->span的父级。也谢谢你的解决方案和建议。“安迪，如果我的答案有帮助，考虑接受和/或投票；好的，我两个都做了。我很少使用堆栈溢出，所以我没有意识到有一个检查符号：-）