如何做CSS属性选择器与title〜=必须包含一个空格？ [英] How to do CSS attribute selector with title~= that has to contain a space?

问题描述

我有以下选择器：

  .post-link [title〜= Corporate] 
  

现在我需要，而不是只选择标题中有公司一词的元素，而不是其他地方标题。

所以我有两个选择：

1）创建一个选择器，

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

  .post-link [title〜= Corporate |] 
  

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

关键字|开头

公司| ig）

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

 code> .post-link [title〜= Corporate |] 
  

/ p>

  .post-link [title〜= Corporate& nbsp; |] 
  pre> 
 
 
无效。如何做到这一点？我找不到Google答案。
 
 
 
非常感谢。
解决方案
 
 
 
现在我需要，而不是只选择标题只有在开头，而不是标题中的其他地方的单词公司的元素。
 
 
 
 
 
您可以使用 [title ^ ='Corporate'] ：
 
 
 
 
 
  [title ^ ='Corporate'] {background：lightgreen;}  

 < div title ='Corporate foo bar'>测试案例1< / div>< div title ='foo Corporate bar'> 2< / div>< div title ='Corporate | foob​​ar'>测试案例3< / div>  

参考 ：

E [foo ^ =bar] ：一个E元素，其foo属性值以字符串bar开始。

I have the following selector:

.post-link[title~=Corporate]

Now I need, instead, to select only elements whose title have the word "Corporate" only at the very beginning, not somewhere else in the title.

So I have two alternatives:

1) create a selector that only checkes at the very beginning of the title and then skip others eventually following or

2) create a selector which can contain a space plus a '|' like:

.post-link[title~=Corporate |]

because in my case all titles begin with

"Keyword |"

(Corporate | i.g.)

But the css is not working any more when I use:

.post-link[title~=Corporate |] 

I also tried:

.post-link[title~=Corporate |]

Does not work. How to do this? I cannot find answers with Google.

Thanks a lot!

解决方案

Now I need, instead, to select only elements whose title have the word "Corporate" only at the very beginning, not somewhere else in the title.

You can use [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"]: an E element whose "foo" attribute value begins exactly with the string "bar"

这篇关于如何做CSS属性选择器与title〜=必须包含一个空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！