如何使用必须包含空格的 title~= 进行 CSS 属性选择器？ [复制]

我有以下选择器：

.post-link[title~=Corporate]

现在，我需要只选择标题仅在开头而不是标题中其他位置包含“Corporate”一词的元素。

所以我有两个选择：

1）创建一个仅检查标题开头的选择器，然后跳过后面的其他选择器或

2）创建一个可以包含空格加“|”的选择器喜欢：

.post-link[title~=Corporate |]

因为就我而言，所有标题都以

“关键字|”

（公司 | 例如）

但是当我使用以下命令时，CSS 不再起作用：

.post-link[title~=Corporate |] 

我也尝试过：

.post-link[title~=Corporate |]

不起作用。这个怎么做？我无法通过 Google 找到答案。

多谢！

现在，我需要只选择标题仅在开头而不是标题中其他位置包含“Corporate”一词的元素。

您可以使用[title^='Corporate']:

[title^='Corporate'] {
  background: lightgreen;
}

<div title='Corporate foo bar'>Test case 1</div>
<div title='foo Corporate bar'>Test case 2</div>
<div title='Corporate | foobar'>Test case 3</div>

参考 https://www.w3.org/TR/css3-selectors/:

E[foo^="bar"]：一个 E 元素，其“foo”属性值恰好以字符串“bar”开头