如何做标题〜=必须包含空格的CSS属性选择器？

Question

我有以下选择器:

.post-link[title~=Corporate]

相反,我现在只需要在标题中选择标题只有"公司"字样的元素,而不是标题中的其他位置.

所以我有两种选择:

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

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

.post-link[title~=Corporate |]

因为在我的情况下所有标题都以

"关键字|"

(公司| ig)

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

.post-link[title~=Corporate |] 

我也尝试过:

.post-link[title~=Corporate |]

不行.这该怎么做？我找不到谷歌的答案.

非常感谢!

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>

参考:

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