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

Question

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

<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 的功能。

编辑 1：

可能对回答者有所帮助的其他详细信息：

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

我正在寻找一个选择器，它可以匹配一个 sn-p 中的任何内容，而不匹配另一个 sn-p 中的任何内容。 （我不确定这是否可行，所以我试图最大限度地灵活回答。）我无法更改上游 HTML，但我可以更改 CSS。

编辑 2：

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

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

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

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

编辑 3：

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

Answer 1

谨慎使用（或根本不使用......）的一个非常老套的想法。仅当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>

Answer 2

这2个代码块的唯一区别是后者有文本节点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 独有的功能会允许以不同的方式进行操作。