将样式添加到具有已知类的 div 的第二个孩子答案

【问题标题】：Add styling to 2nd child of div with known class将样式添加到具有已知类的 div 的第二个孩子
【发布时间】：2020-01-24 05:08:47
【问题描述】：

<a href="" class="header-logolink">

    <div>
        <img class="header-logoimage" src="~/images/SummerFling-logo.jpeg" alt="Summer Fling"/>
    </div>
    <div>
        <h1 class="header-logotext">Summer Fling</h1>
    </div>

</a>

如何在不向<div> 添加类的情况下向此处的 2 个<div> 添加单独的样式？

我尝试过使用：

.header-logolink:nth-child(1) {

}

但这会影响<a> 的样式，而不是这里看到的第一个<div>。

【问题讨论】：

.header-logolink :nth-child(1) ... 您需要在父元素和子元素之间的选择器中使用空格（后代组合符）。

标签： html css css-selectors attributes styling

【解决方案1】：

您正在选择带有第 n 个元素的锚标记，您必须选择 div 然后指定第 n 个元素，如下所示

.header-logolink div:nth-child(1) {
  background-color:red;
}

.header-logolink div:nth-child(2) {
  background-color:green;
}

【讨论】：

【解决方案2】：

尝试这样设置第一个 div 子元素的样式

.header-logolink div:nth-child(1) {
  background-color: yellow;
}

【讨论】：