CSS 扇区倒数第 n 个子项没有指定的类或样式值

Question

我一直在努力弄清楚这个问题。基本上，我需要找到某个元素的最后一个子元素，它既没有指定的类属性，也没有指定的样式属性。

我已经尝试了这里建议的所有方法，但没有成功。

我想要实现的是确保"工具栏">内的最后一个元素具有边框半径，如下所示 - https://home.gaiasoul.com/hyper-ide(到右上角)

但是，时不时地，我的一个按钮被隐藏了，因为它们不应该是可见的，因为它们由于某些原因被"禁用"。此时，我不能简单地使用最后一个子选择器，因为这可能会选择一个不可见的按钮。

我不能使用JavaScript，绝对不能使用任何jQuery。

不应选择最后一个子项的 HTML 示例。

<div class="strip">
<button>1. visible</button>
<button>2. visible</button>
<button class="hide">3. HIDDEN</button>
</div>

基本上，我想要一个选择器，它将从上面找到"strip">的最后一个子元素，但如果它是不可见的，则不会，上面的最后一个元素就是这种情况。

我的示例之所以看起来不错，是因为它没有不可见的按钮。我想完成同样的事情，如果有一个看不见的按钮作为我的最后一个元素......

我已经尝试了带有 ：not 的第 n 个最后一个孩子，正如这里的另一个问题(类似)所建议的那样。这是我当前的(相关)CSS，显然不起作用。

.strip {
display: flex;
}
.strip>* {
border: solid 1px var(--border-color);
border-radius: 0;
border-left-style: none;
}
.strip>*:first-child {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
border-left-style: solid;
}
.strip>*:last-child {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}

我试过了

.strip>*:nth-last-child(1 of :not(.hide))

和各种：不是排列，但它似乎不起作用。甚至可以做到吗？

Answer 1

我认为当边框应用于按钮时，您不会找到CSS解决方案，因为您正在尝试将规则应用于以前的兄弟元素(更多 这里).

但是，如果您愿意将边框应用于包装器(.strip)，则可以执行以下操作...

.strip {
display: inline-flex;
border: 1px solid black;
border-radius: 5px;
overflow: hidden;
}
.strip button {
border: 0;
}
.strip button:not(:first-of-type) {
border-left: 1px solid black;
}
.hide {
display:none;
}

<div class="strip">
<button>1. visible</button>
<button>2. visible</button>
<button class="hide">3. HIDDEN</button>
</div>