Html 在第一个子项和分词选择器上混淆

我不想问，但在第一个孩子的问题上我很困惑

    <div class="container">
        <div class="row">
            <div class="col-4">
                <a href="#" class="btn">Primary Button |<span> red text here</span></a>
            </div>
            <div class="col-4">
                <a href="#" class="btn">Secondary button |<span> yellow text here</span></a>
            </div>
            <div class="col-4">
                <a href="#" class="btn">Danger Button |<span> green text here</span></a>
            </div>
        </div>
    </div>

因为它认为他们是第一个也是最后一个孩子

不对

这是因为

span

是其父元素（即

a

）的

:first child

和

:last child

）

---

如果要将

span

作为目标，该

div

是其父对象的

：第一个子对象（即
.row
的子对象）…则必须编写与
div
匹配的选择器

.row div:first-child span {

因为它认为他们是第一个也是最后一个孩子

不对

这是因为
span
是其父元素（即
a
）的
:first child
和
:last child
）


如果要将
span
作为目标，该
div
是其父对象的
：第一个子对象（即
.row
的子对象）…则必须编写与
div
匹配的选择器

.row div:first-child span {

通过以col-4类为目标并使用相同的：first child/：last child逻辑，可以实现所需的效果。这将起作用，因为第一个col-4是.row div的第一个子级，最后一个on是.row的最后一个子级

然后对内部的跨度进行定位并适当着色


.col-4：第一个孩子span{
颜色：红色；
}
.col-4 span{
颜色：黄色；
}
.col-4：最后一个孩子{
颜色：绿色；
}
您可以通过针对col-4类并使用相同的：first child/：last child逻辑来实现所需的效果。这将起作用，因为第一个col-4是.row div的第一个子级，最后一个on是.row的最后一个子级

然后对内部的跨度进行定位并适当着色


.col-4：第一个孩子span{
颜色：红色；
}
.col-4 span{
颜色：黄色；
}
.col-4：最后一个孩子{
颜色：绿色；
}

所以我无法引用元素，因为它不是.row div的直接后代？引用的唯一方法是，是否不在div.col-4中，而是直接在div.row中？我一直假设，如果你这样做了。row span，那么它会找到所有包含类“row”的行，这些行在其中的某个地方有一个span，然后将它们放入集合中。。显然，他们必须是直系后裔才能被纳入同一个“收藏”中？这与xpath查询不同？“因此我无法引用元素
”-您可以…但是如果您关心它是哪个div的后代，您必须明确地提到该div。“因为它不是.row div的直接后代？”-它是该行的后代。“我一直假设如果你这样做了。第span行然后它会找到所有带有类“row”的行，这些行的某个地方有一个span，”-不。它会找到所有的
span
s，它们的祖先都是类
row
“显然它们必须是直系后代”-所有的后代都是直系后代。你可能会感到困惑”“子代”和“子代”。但这与问题无关，问题是您关心父元素中的哪个
div
（第一个、最后一个或其他）span是的后代）。因此我无法引用元素，因为它不是.row div的直接后代？唯一的引用方法是如果不在div.col-4中，并且直接在div.row中？我一直假设如果是。row span，那么它会找到所有具有类“row”的行，这些行在我的某个地方有spannside，然后将它们放入集合中。显然，它们必须是直接的后代，才能在同一个“集合”中被考虑？这与xpath查询不同？“所以我不能引用元素
“-您可以…但是如果您关心它是哪个div的后代，您必须明确地提到该div。”“因为它不是.row div的直接后代？”-它是该行的后代。“我一直假设，如果您是.row span的后代，那么它会找到所有具有类“row”的行，该类的行在其内部某处有一个span，”-否。它会查找所有祖先为class
row
的
span
s“显然他们必须是直系后代”-所有后代都是直系后代。您可能会混淆“后代”和“子女”。但这与问题无关，问题是您关心span从哪个
div
（父元素中的第一个、最后一个或其他）派生而来。