CSS3学习笔记 之 属性选择器

当前位置 : 首页 > 网页制作 > CSS > CSS3学习笔记 之 属性选择器

CSS3学习笔记 之 属性选择器

来源: 作者: 时间:2016-01-23 10:51
属性选择器可以给予元素的属性来匹配元素,CSS3还支持基于模式匹配来定位元素,属性选择器语法如下:选择器功能描述E[attr]选择匹配具有属性attr的E元素。其中E可以省略,表示选择

属性选择器可以给予元素的属性来匹配元素,CSS3还支持基于模式匹配来定位元素,属性选择器语法如下:

选择器 功能描述
E[attr] 选择匹配具有属性attr的E元素。其中E可以省略,表示选择定义了attr属性的任意类型元素
E[attr=value] 选择匹配具有属性attr的E元素,并且attr的属性值为val(其中val区分大小写),同样E元素省略的时表示选择定义了attr属性值为val的任意类型元素
E[attr|=val] 选择匹配E元素,且E元素定义了属性attr,attr属性值是一个具有val或者以val-开始的属性值。常用于lang属性(例如lang=“en-US”)。例如p[lang=en]将匹配定义为英语的任何段落,无论是英式英语还是美式英语
E[attr~=val] 将匹配E元素,且E元素定义了属性值attr,attr属性值具有多个空格分隔的值,其中一个值等于val。例如,.info[title~=more]将匹配元素具有类名info,且这个元素设置了一个属性title,同时title属性值是包含了“more”的任何元素,例如
E[attr*=val] 将匹配元素E,且元素E定义了属性attr,其属性值任意位置包含了val,换句话说字符串val与属性值中的任意位置相匹配
E[attr^=val] 将匹配元素E,且E元素定义了属性attr,其属性值以val开头的任何字符串
E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,其属性值以val结尾的任何字符串,刚好与E[attr^=val]相反

浏览器兼容性:IE7+,还有所有版本的FF,Chrome,Safari,Opera都支持属性选择器。

下面使用实例来演示属性选择器的使用,首先编写入下一个简单的HTML程序:




	
	CSS3属性选择器的使用
  


	

显示效果如下:

\

E[attr]属性选择器

选择所有带有id属性的a元素,并且改变匹配元素的背景颜色,在上面HTML代码CSS样式部分的最后增加如下代码:

a[id] {
      background-color:yellow;
}

显示效果如下:

\


E[attr=val]属性选择器

指元素E设置了属性attr,并且其属性值为val,在上述html代码CSS样式的末尾增加如下代码:

a[id=first] {
    background-color: red;
}

显示效果如下:

\

E[attr"=val]属性选择器

选择attr属性值等于val或以val-开头的所有字符串属性的元素,在上面HTML的CSS样式后面增加如下代码:

a[lang|=zh] {
	background-color: yellow;
}

显示效果如下:

\


E[attr~=val]属性选择器

根据元素值中的此列表的某个词来匹配需要的元素,就可以使用这个选择器。在上面HTML页面CSS样式最后增加下面代码:
a[title~=website] {
	background-color: green;
}

显示效果如下: \

E[attr*=val]属性选择浓ky"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc8L2gyPgq9q8alxeTEx9CpyejWw8HLYXR0csr00NSjrLb4x9JhdHRyyvTQ1CYjMjA1NDA71tCw/LqsdmFs19a3+7SutcTUqsvYo6zU2snPw+ZodG1s0rPD5rT6wutDU1PR+cq91+6689T2vNPI58/CtPrC66O6CjxwcmUgY2xhc3M9"brush:java;">a[class*=links] { background-color: pink; }显示效果如下: \

E[attr^=val]属性选择器

选中attr属性以val开头的所有元素,在上述HTML页面的CSS样式最后增加如下代码:
a[href^=http] {
background-color: crimson;
}
显示效果如下: \

E[attr$=val]属性选择器

选择属性以val结尾的所有元素,在上面html代码最后增加如下代码:
a[href$=png] {
background-color: cyan;
}

显示效果如下:

Tag:
网友评论

<