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

Question

我有以下选择器：

.post-link[title~=Corporate]

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

所以我有两种选择：

1) 创建一个只检查标题开头的选择器，然后跳过其他最终跟随或的选择器

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

.post-link[title~=Corporate |]

因为在我的例子中，所有标题都以

开头

“关键字|”

（公司 | 例如）

但是当我使用时 css 不再工作了：

.post-link[title~=Corporate |] 

我也试过了：

.post-link[title~=Corporate |]

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

非常感谢！

Answer 1

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

你可以使用[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>

Reference：

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

Answer 2

应该这样做。 .post-link[title|="Corporate "]

|= 运算符匹配开头。