Question

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

我已尝试过这里建议的所有内容，但没有成功。

我想要实现的是确保“工具栏”中的最后一个元素具有border-radius，例如可以在这里看到 - 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”的最后一个子元素，但如果它不可见则不是，这就是上面最后一个元素的情况。

我的示例看起来很好的原因是因为它没有一个隐形按钮。我想要完成相同的工作，如果有一个隐形按钮作为我的最后一个元素......

我已经尝试过nth-last-child with a：not，正如其他问题中的建议（类似）。这是我当前的（相关的）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解决方案，因为您尝试将规则应用于上一个同级元素（more here）。

但是，如果您愿意将边框应用于包装器（.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>

CSS扇区nth-last-child没有指定类或样式值

1 个答案: