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

Question

我正在尝试选择具有特定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;
}

Answer 1

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

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

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