:last-child 伪类与属性选择器混合不起作用答案

【问题标题】：:last-child pseudo-class mixed with attribute selector not working:last-child 伪类与属性选择器混合不起作用
【发布时间】：2016-09-20 05:12:11
【问题描述】：

我正在尝试选择具有特定 data- 属性的元素的第一个和最后一个子元素。

:first-child 选择器工作正常，但 :last-child 不工作。我真的不知道是什么原因造成的。我检查了错别字。

CSS

.element[data-type='element']:first-child {
    padding-left: 0;   
    background-color:red !important
}

.element[data-type='element']:last-child {
    padding-right: 0; 
    border-right:0; 
    background-color:red !important;
}

【问题讨论】：

根据您的 HTML 结构的其余部分，:first-of-type 和 :last-of-type 可能会更好。
您需要在 first-child 选择器中的 !important 之后放置一个分号。它不会影响该选择器（因为它是最后一条规则），但它可能会影响下一条。
不走运。我将 :first 和 :last child 更改为 :first-of-type 和 :last-of-type 但它仍然是同一个问题。我还添加了分号，但这并没有解决它。
@worldofjr：应该不会影响下一条规则。
Works fine for me。因此，我们无法使用给定的信息对其进行调试

标签： css css-selectors

【解决方案1】：

我正在尝试选择具有特定 data- 属性的元素的第一个和最后一个子元素。

底线是，在 CSS 中没有办法做到这一点。

last-child（和last-of-type）的意思是，“最后一个孩子”和“类型的最后一个孩子”，他们确实不是意味着“最后一个孩子匹配整个选择器，包括一个属性选择器”。在您的情况下，第三个div 很可能实际上不是父元素中的最后一个子元素（或不是最后一个div）；除非您显示整个 HTML，包括父元素及其所有子元素，否则无法判断。

【讨论】：