css – ：与属性选择器混合的last-child伪类无法正常工作

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

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

解决方法

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

最重要的是,在CSS中没有办法做到这一点.

last-child(和last-of-type)意味着,“最后一个孩子”和“最后一个孩子”,它们并不意味着“最后一个孩子匹配包括属性选择器的整个选择器”.在您的情况下,第三个div可能实际上不是父元素中的最后一个子节点(或不是最后一个div);除非您显示包含父元素及其所有子元素的整个HTML,否则无法判断.