css3選擇器的比較（二） -- 包含字符串

     廣播： 關注微信公眾號 “jQuery每日經典” ，有更多資料。微信小程序 -- 前端技術API手冊 也在公眾號首次發布。有需要的聯系公眾號中QQ。

 

二.  包含“字符串”

兩種用法的區別是：

a. “~=”，需要用空格分割，

b. "*="，不需要任何分隔符

1. 資料

a）

b) 

2. html代碼

<div title="dot 4">空格分割</div>
<div title="dot">字符串本身</div>
<div title="dottest">全字母字符串</div> 
<div title="dot_3">下划線分割字符串</div>
<div title="dot-3">橫線分割字符串</div>

3. css代碼

a)

[title~="dot"]{
    border: 1px solid #000;
}

b)

[title*="dot"]{
    border: 1px solid #000;
}

4. 效果：

a)

b)