前端技术学习之选择器（二）

2,根据属性值选择

/*[title~=hello]{color:red;} /*如果含有值 */*/

[title="world"] {color: red;} /*如果值等于＊／

Hello world

Hello world

。

运行效果：

3,特定属性选择类型

*[title|="h"]{color: red;}

当有属性title并且title属性的值是以h或者h-开头的元素

4，使用通配符的属性选择器

E[att^="val"]，选择器匹配元素E，且E元素定义了属性att,att       的属性值是以val开头的任何字符串。

E[att$="val"]，选择器匹配元素E，且E元素定义了属性att，att的属性值以val结尾的任何字符串。

E[att*="val"]，选择器匹配元素E，且元素定义了属性att，att属性值任意位置包含了"val"。

代码例子：

选择器

a[class^=icon]{

background: green;

color:#fff;

}

a[href$=pdf]{

background: orange;

color: #fff;

}

a[title*=more]{

background: blue;

color: #fff;

}

我链接的是PDF文件

我类名是icon

我的title是more

运行效果：