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

问题描述

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

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

推荐答案

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

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(和 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 伪类与属性选择器混合不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！