如何使用类结合only-child伪类选择器选中指定class的单个元素

我想要通过only-child伪类选择器选中带有特定class的单个div，原本以为如下写法可以生效：

.foo .bar:only-child {
  background-color: red;
}

<div class="foo">
  <div>1</div>
  <div class="bar">2</div>
  <div>3</div>
</div>

但实际运行后该写法没有生效，请问only-child伪类选择器是否仅支持搭配元素类型使用，还是也可以和类选择器配合使用？

• only-child伪类的匹配逻辑是当前元素是父元素的唯一一个子元素，和元素是否附加类选择器无关，只要父元素下存在其他任何子元素，该伪类就不会生效。你示例中.foo下共有3个div子元素，所以没有任何元素满足:only-child的匹配条件，自然筛选不到.bar元素。
• only-child完全可以和类选择器搭配使用，只要对应类的元素是父元素的唯一子元素即可，比如把上述HTML中.foo下的另外两个div删除，你的原始写法就可以正常生效。

你给出的解决方案能生效的原因是将目标元素改成了自定义的<bar>标签，搭配的:only-of-type伪类的逻辑是匹配父元素下同类型标签中唯一的那一个，<bar>标签在.foo下只有一个，所以可以被正常匹配。

如果不想修改原有HTML的标签结构，想要实现「选中父元素下唯一带指定类的元素」的效果，目前CSS没有原生的only-of-class类选择器，你可以通过调整DOM结构，或者使用JavaScript辅助筛选来实现。

如果你接受修改标签结构，可参考如下实现：

.foo bar:only-of-type {
  background-color: red;
}

<div class="foo">
  <div>1</div>
  <bar>2</bar>
  <div>3</div>
</div>

内容的提问来源于stack exchange，提问作者Teamol