：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，否则无法判断。