Css 第一个子项/最后一个子项不同的悬停样式

我想制作渐变效果，左侧较暗的一面用于

Previous

，右侧较暗的一面用于

Next

。以下是我迄今为止所做的尝试：

我错过了什么

.calnav{
字体大小：1.3em；
颜色：#000；
高度：35px；
线高：35px；
边界半径：8px；
背景：白色；
}
.calnav:第一个孩子：悬停{
背景#537d8d；
背景：-moz线性梯度（左，rgba（33,21,32,1）0%，rgba（255,255,0）100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（左，rgba（33,21,32,1）0%，rgba（255,255,0）100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（向右，rgba（33,21,32,1）0%，rgba（255,255,0）100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#211520'，endColorstr='#00ffffff'，GradientType=1）；
/*IE6-9*/
}
.calnav:最后一个子对象：悬停{
背景#537d8d；
背景：-莫兹线性梯度（左，rgba（255，255，255，0）0%，rgba（253，253，253，0）1%，rgba（37，26，36，1）98%，rgba（33，21，32，1）100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（左侧，rgba（255，255，255，0）0%，rgba（253，253，253，0）1%，rgba（37，26，36，1）98%，rgba（33，21，32，1）100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（向右，rgba（255，255，255，0）0%，rgba（253，253，253，0）1%，rgba（37，26，36，1）98%，rgba（33，21，32，1）100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00ffffff'，endColorstr='#211520'，GradientType=1）；
/*IE6-9*/
}

2017年7月至7月

您有什么理由不想将格式应用于链接并丢失包含的div

例如：

a.calnav {
    display:block; // or display:inline-block depending on your need
    font-size: 1.3em;
    color: #000;
    height: 35px;
    line-height: 35px;
    border-radius: 8px;
    background: white;
}

---

然后只需向每个（

a.calnav.prev{}

）添加一个prev/next类名？

有什么原因不想将格式应用于链接并丢失包含的div

例如：

a.calnav {
    display:block; // or display:inline-block depending on your need
    font-size: 1.3em;
    color: #000;
    height: 35px;
    line-height: 35px;
    border-radius: 8px;
    background: white;
}

---

然后只需为每个（

a.calnav.prev{}

）添加一个prev/next类名？

首先，HTML包含错误。你不应该把

放在

2017年7月至7月

首先，您的HTML包含错误。你不应该把

放在

2017年7月至7月

好的，我说了。好的，我说了。这并没有回答第一个孩子/最后一个孩子不同悬停方式的问题。我错过了什么？。然而，它提供了一种很好的替代方法+很高兴能帮助。。。顺便说一句，我也会看看Racil Hilan的答案，并回顾儿童选择器。您在CSS中引用了两个相同的元素。我个人对类似的东西的偏好是不同的类标记，如我所示，因为很可能会将上一个/下一个链接/按钮绑定到某种Javascript函数，而不是使用href属性进行后退或前进（如图像幻灯片），因此.prev/.next类标记将使分配相关的JS单击操作变得更容易。Racil，你是对的，你的后续评论比我的后续评论快了一点，我的后续评论提到了你的注释：-）。。。。我没有注意到你在回答中指出的主要问题。这并没有回答第一个孩子/最后一个孩子不同悬停方式的问题。我错过了什么？。然而，它提供了一种很好的替代方法+很高兴能帮助。。。顺便说一句，我也会看看Racil Hilan的答案，并回顾儿童选择器。您在CSS中引用了两个相同的元素。我个人对类似的东西的偏好是不同的类标记，如我所示，因为很可能会将上一个/下一个链接/按钮绑定到某种Javascript函数，而不是使用href属性进行后退或前进（如图像幻灯片），因此.prev/.next类标记将使分配相关的JS单击操作变得更容易。Racil，你是对的，你的后续评论比我的后续评论快了一点，我的后续评论提到了你的注释：-）。。。。我没有注意到你在回复中指出的主要问题。