:first-child 选择器不起作用？答案

【问题标题】：:first-child selector not working?:first-child 选择器不起作用？
【发布时间】：2015-04-09 22:47:32
【问题描述】：

我不明白为什么我不能在我的 cal-week-5 div 中选择类“.adjacent-month”的第一个元素。（在最后一天做一个左边框）

HTML：

        <div class=" week cal-week-5">
            <div class="day past calendar-day-2015-03-30 calendar-dow-0">30
                <div class=" value val-30"></div>
            </div>
            <div class="day past calendar-day-2015-03-31 calendar-dow-1">31
                <div class=" value val-31"></div>
            </div>
            <div class="day past adjacent-month next-month calendar-day-2015-04-01 calendar-dow-2">1
                <div class=" value val-1"></div>
            </div>
        </div>

【问题讨论】：

标签： html dom css-selectors

【解决方案1】：

两个问题。

.cal-week-5 .day .adjacent-month:first-child .value

1) 单元格既有.day 和.adjacent-month 类，所以这永远不会工作。

.cal-week-5 .day.adjacent-month:first-child .value

2) :first-child 仅适用于父元素的第一个子元素，因此仅当这一天是第 5 周的第一天时才会触发。

有一些用于选择第一种类型的实验性选项。你可以在这里阅读更多：CSS selector for first element with class

然而，我建议修改您的代码以向第一个单元格添加一个新类。它更容易并且更兼容跨浏览器。如果你不关心旧浏览器，你可以看看花哨的 CSS3 工具。

【讨论】：

谢谢！向第一个相邻月份的单元格添加一个新类 ?当您谈论花哨的 CSS3 工具时，您的意思是高级选择器？
@Anti 是的。较旧的浏览器，尤其是 Internet Explorer，将无法支持尽可能多的 :selectors，因此请小心。我建议添加一个新类，例如 first-of-next-month，并直接对其应用样式。

【解决方案2】：

正如 Jaw.sh 所述，您需要删除选择器的 .day 部分。但是，您最大的误解可能来自 :first-child 选择器本身。

正如reference 中所述，:first-child 选择器“当 E 是其父元素的第一个子元素时匹配元素 E。”。

这意味着.day .adjacent-month:first-child 匹配任何具有adjacent-month 类的元素，该元素在某个级别低于具有day 类的元素，并且是其直接父元素的第一个子元素。

例如，这将被匹配：

<div class="day">
    <ul>
        <li class="adjacent-month">First child</li>
        <li class="adjacent-month">Second child</li>
    </ul>
</div>

你可能想要的是类似

.cal-week-5 :not([class*=adjacent-month]) + .adjacent-month .value

记录在 here 并且应该得到很好的支持。

【讨论】：