：last-child伪类混合属性选择器不工作 [英] :last-child pseudo-class mixed with attribute selector not working

问题描述

我试图选择具有特定数据 - 属性的元素的第一个和最后一个子元素。

I'm trying to select the first and last child of an element with a specific data- attribute.

：first-child 选择器工作正常，但：last-child 无效。我真的不知道什么可以造成这种。我已检查错别字。

The :first-child selector works fine, but :last-child isn't working. I seriously don't know what can cause this. I have checked for typos.

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;
}

推荐答案

我试图选择具有特定数据 - 属性的元素的第一个和最后一个子元素。

I'm trying to select the first and last child of an element with a specific data- attribute.

底线是，在CSS中没有办法。

Bottom line is, there's no way to do that in CSS.

last-child （and last-of-type ）是指，last child和last child of type，他们不意味着匹配包括属性选择器的整个选择器的最后一个孩子。在你的情况下，很可能第三个 div 实际上不是最后一个子项（或不是最后一个 div ）在父元素内;除非你显示整个HTML，包括父元素及其所有子元素，否则不可能分辨。

last-child (and last-of-type) mean, well, "last child", and "last child of type", they do not mean "last child matching the entire selector including an attribute selector". In your case, it is likely that the third div is not actually the last child (or not the last div) within the parent element; it's impossible to tell unless you show the entire HTML including the parent element and all its children.

这篇关于：last-child伪类混合属性选择器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！