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

Question

我有以下选择器：

.post-link[title~=Corporate]

相反，现在我只需要选择标题中仅包含“公司”字样的元素，而不是标题中的其他位置。

所以我有两种选择：

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

2）创建一个可以包含空格加'|'的选择器像：

.post-link[title~=Corporate |]

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

开头

“关键字|”

（公司| i.g。）

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

.post-link[title~=Corporate |] 

我也尝试过：

.post-link[title~=Corporate |]

不起作用。这该怎么做？我找不到谷歌的答案。

非常感谢！

Answer 1

  

现在我需要只选择标题中包含＆＃34; Corporate＆＃34;只是在一开始，而不是标题中的其他地方。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强> Reference ：

  

E[foo^="bar"] ：一个E元素，其中＆＃34; foo＆＃34;属性值恰好以字符串＆＃34; bar＆＃34;开头。

Answer 2

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

|=运算符与开头匹配。