CSS选择器：选中仅为唯一子元素且无非空格兄弟的<code>元素

原代码及问题现象 #

原HTML和CSS代码如下：

<!DOCTYPE html>
<html>
  <head>
  <style>
code {
  display: inline-block;
  padding: 0;
  color: red;
}
p > code:only-child {
  display: block;
  white-space: pre;
  padding: 20px;
  line-height: 125%;
  background: #eee;
  border: 1px solid #ccc;
  margin: 1em 0;
}

  </style>
  </head>
  <body>
<p>Assuming you have the IP <code>1.1.1.1</code>:</p>

<p><code>
echo "hello world";
echo "another command here";
echo "you are done";
</code></p>
</body></html>

当前问题：p > code:only-child选择器会错误选中那些<p>标签内还包含其他文本内容的<code>元素（比如示例中包裹IP的<code>），因为:only-child仅判断元素节点，忽略了<p>内的文本节点。

解决方案 #

利用CSS的:has()伪类结合文本节点选择，精准筛选出<p>内仅包含<code>元素（无其他非空格文本内容）的情况，同时保留其他<code>的行内块样式：

/* 基础样式：所有code默认行内块 */
code {
  display: inline-block;
  padding: 0;
  color: red;
}

/* 先给所有p下唯一的code元素设置块级样式 */
p > code:only-child {
  display: block;
  white-space: pre;
  padding: 20px;
  line-height: 125%;
  background: #eee;
  border: 1px solid #ccc;
  margin: 1em 0;
}

/* 重置那些p内包含非空格文本的code元素样式，恢复行内块 */
p:has(text()[not(normalize-space()='')]) > code:only-child {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  margin: 0;
  white-space: normal;
}

说明 #

• text()[not(normalize-space()='')]用于匹配<p>内存在非空格的文本节点
• :has()伪类检测<p>是否包含上述文本节点，若包含则重置其内部的code:only-child样式
• 该方案兼容现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）

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