使用 CSS 选择器，是否可以区分这两个代码片段？

问题描述

使用 CSS 选择器，是否可以以任何方式区分以下两个代码片段？通过区分，我的意思是选择任一片段的任何部分（或全部），而不是另一个。

<span role="presentation">
   <span class="test" role="presentation" test-text="foo">bar</span>
</span>

和

<span role="presentation">
   <span class="test" role="presentation" test-text="foo">bar</span>
   baz
</span>

所使用的网络浏览器仅为 Firefox，因此也可以接受 Mozilla-only 功能。

编辑 1：

可能有助于回答者的其他详细信息：

代码中提供了上述两个 HTML 片段的更复杂版本。我已将其隔离以简化此问题，因为其他所有内容都将相关。唯一的区别是外部 span 中的字符串（在这个简化示例中为baz）。

我正在寻找一个选择器，它可以匹配一个片段中的任何内容，而不匹配另一个片段中的任何内容。（我不确定这是否可行，所以我试图在答案上尽可能灵活。）我无法更改上游 HTML，但我可以更改 CSS。

编辑 2：

我被要求添加更多细节和细节，因为这可能会影响答案。

我认为这真的有助于澄清：我的目标是隐藏字符串 bar 当且仅当 baz 出现在上游HTML（如第二个代码片段所示）。

我擅长隐藏整个 span.test 元素或仅隐藏其中的 bar 文本字符串......无论哪种方式都可以。

关于隐藏 bar，我愿意隐藏它的所有可能性，因此它不占用空间。我在考虑 display: none 或 width: 0，但是当 baz 存在时，任何导致它不占用任何空间的东西都是好的。

编辑 3：

只是一个快速更新：我深入研究了上游代码，看起来 bar 将始终是空白。我不确定这是否会打开任何门，但如果有，我认为值得一提。

解决方法

谨慎使用（或根本不使用......）的一个非常hacky的想法。仅当 baz 长于 bar

时才有效

[role=presentation] {
  text-indent: -13px; /* based on "bar" text */
  display: inline-block;
  position:relative;
}
[role=presentation]::before {
   content:"";
   position:absolute;
   top:0;
   bottom:0;
   right:0;
   left:0;
   background:#fff;
    z-index: -1;
}

[role=presentation] [role=presentation] {
  text-indent: 0;
  z-index:-2;
  transform: translateX(calc(100% + 7px)); /* the 7px is the whitespace*/
  margin-right:0;
}
[role=presentation] [role=presentation]::before {
  content:none;
}


/* irrelevant,simply to separate both elements */
.extra {
  margin: 10px;
  font-size:30px;
}

<div class="extra">
  <span role="presentation">
   <span class="test" role="presentation" test-text="foo">bar</span>
  </span>
</div>
<div class="extra">
  <span role="presentation">
   <span class="test" role="presentation" test-text="foo">bar</span> baz
  </span>
</div>

<div class="extra">
  <span role="presentation">
   <span class="test" role="presentation" test-text="foo">bar</span> another baz
  </span>
</div>

这两个代码块的唯一区别是后者中有文本节点baz。

但是，无法选择文本节点。

即使 baz 被 HTML 元素包裹，它也无助于选择前一个兄弟元素或父元素。这是不可能的。

我能想到的选择它们的唯一方法是通过 span[role="presentation"] 在父元素中的位置。

例如，如果 span[role="presentation"] 是同一个父级的子级，您可以使用伪类选择它们，例如 :first-child、:last-child、:nth-child() 等...>

div > span[role="presentation"]:first-child {
  background: red;
}

div > span[role="presentation"]:last-child {
  background: green;
}

<div>
  <span role="presentation">
     <span class="test" role="presentation" test-text="foo">bar</span>
  </span>

  <span role="presentation">
     <span class="test" role="presentation" test-text="foo">bar</span> baz
  </span>
</div>

我不知道有任何 Mozilla 独有的功能可以允许以不同的方式执行此操作。

css-selectors firefox firefox html pattern-matching