父节点中只有一个子节点的选择器

Question

我正在玩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>

这里是一个JSFiddle https://jsfiddle.net/2L593m3x/

Answer 1

父母只有一个孩子：

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

奖金

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

p:has(:only-child) { color:green }

Answer 2

如果您可以创建自定义标签（或者每当Web 组件获得广泛支持时），您可以使用: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>

Answer 3

我可以构建一个自定义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