当父级中仅存在一个子级时的选择器

我正在使用 CSS 选择器，我想知道我是否可以构建一个自定义 css 选择器，使其仅在只有一个类时才起作用.widget-button，示例代码；

<div class='container a'>
  <div class='widget-a' />
  <div class='widget-b' />
  <div class='widget-button' /> 
  <div class='widget-b' />
</div>

所以你会假设有一个伪选择器的组合（:only-child ?）这项工作是否适合上述工作？然而，下面的示例不应应用任何选择/样式，因为该类不止一个。

<div class='container b'>
  <div class='widget-a' />
  <div class='widget-b' />
  <div class='widget-button' />
  <div class='widget-z' />
  <div class='widget-x' />
  <div class='widget-button' />
  <div class='widget-z' />
</div>

这里有一个 JSFiddlehttps://jsfiddle.net/2L593m3x/ https://jsfiddle.net/2L593m3x/

如果您可以创建自定义标签（或者每当网络组件 https://developer.mozilla.org/en-US/docs/Web/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>