将css最后一个子元素应用于ul li中不是直接子元素的元素

我有这个HTML--

我试图将红色边框仅应用于最后一个

child-1 div

。但这并没有发生。CSS

last child

pseudo类检查它是否是其直接父对象中的最后一个元素，而不是整个DOM中的最后一个元素（这是我的错误理解）

你知道如何只用css来实现吗

li:last-child .child-1

也会有同样的效果

1 pseudo不尊重最后声明的

类，它只跟踪父/子关系中元素的最后一个实例

1与
：第n个孩子（1）
。：last-child伪类表示
元素，它是其他元素的最后一个子元素

举个例子，如果你有

div.wrap div.blow:last-child {
   /* .blow doesn't make any sense there, CSS will look up 
       for last div element nested inside .wrap */
}

写一些像

div.wrap div.blow:last-child {
   /* .blow doesn't make any sense there, CSS will look up 
       for last div element nested inside .wrap */
}

在这种情况下，您可以尝试使用

.parent li:last-child div[class^="child-1"] {
    border-color:red;
}

或者干脆

.parent li:last-child div.child-1.x {
   border-color:red;
}



注意：
last child
有点松散，因为如果该元素不是父元素的最后一个子元素，它将忽略该元素，因此这里，
last of type
起作用，它选择
元素的
last type
，而不管该元素的DOM级别如何

ul li:last-child > div.child-1 {
    border-color:red;
}

例如：

ul li:last-child > div.child-1 {
    border-color:red;
}