如果您可以创建自定义标记（或者Web Components得到广泛支持），则可以使用:only-of-type：

div>* {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: red;
}

widget-button:only-of-type {
  background-color: blue;
}

<div>
  <widget-a></widget-a>
  <widget-b></widget-b>
  <widget-button></widget-button>
  <widget-b></widget-b>
</div>
<div>
  <widget-a></widget-a>
  <widget-b></widget-b>
  <widget-button></widget-button>
  <widget-z></widget-z>
  <widget-x></widget-x>
  <widget-button></widget-button>
  <widget-z></widget-z>
</div>

我可以建立一个自定义的css选择器只工作时，只有一个类

• • 长话短说：**不

我们不断收到关于如何选择nth-of-class的问题。
您 * 不能 * 选择nth-of-class。
您可以按子项选择。
您可以按元素类型选择。

• 您不能按要素分类选择。*

在 * 某 * 点，nth-match（和互补选择器）* 可能 * 到达：

• • 例如**

.widget-button:nth-match(2n+1)
.widget-button:first-match
.widget-button:last-match
.widget-button:only-match

当然可以，您可以通过链接两个不同的选择器来实现：

• 是第一个直接子级。
• 是其类型的最后一个子级。

.container > .widget-button:nth-child(1):last-child

• 编辑：*显然我误解了这个问题，但这在其他一些情况下可能会有帮助。

.wrapper {
  margin: 50px 0;
  padding: 0 10px;
  border: 1px solid #555;
}

.wrapper div {
  border: 1px solid #555;
  padding: 0px 5px 10px 5px;
  margin: 10px 0;
}

.wrapper div:not(:first-child:last-child) {
  background-color: gold;
}

<div class="wrapper">
  <div class="container">Container #1</div>
  <div class="container">Container #2</div>
  <div class="container">Container #3</div>
  <div class="container">Container #4</div>
  <div class="container">Container #5</div>
</div>

<div class="wrapper">
  <div class="container">Container #1</div>
</div>

父级中只有一个子级：

p:has(br:first-child:last-child)

奖金
x一个一个一个一个x一个一个二个x