CSS3 选择器

1. 选择器概述

1.使用元素的class属性的缺点：

class本身没有语义，纯粹为css样式服务
并没有把样式与元素结合起来

2. css3

将样式与元素直接绑定起来，使用选择器指定样式。采用类似E[foo$="val"]正则表达式形式

例：指定id末尾字母为"t"的div元素的背景色为蓝色

div[id$="t"] {background:red}

2. 属性选择器概述

3. 属性选择器

1. [att*=val]

含义：如果元素用att表示的属性的属性值中包含用val指定的字符，则该原色使用这个样式。

//css
[id=image-boarder] {width:450px;}
//html
<div id="image-boarder" class="hhh"></div>

2. [att^=val]

匹配开头相同的属性名

//css
[id^=sider] {width:450px;}
//html
<div id="sider" class="hhh"></div>

此段代码的意思是将id以sider开头的val设置宽450px;
3. [att$=val]

匹配末尾相同的属性名

//css
[id$=sider] {width:450px;}
//html
<div id="sider" class="hhh"></div>

此段代码的意思是将id以side结尾的val设置宽450px;

灵活的运用属性选择器

如果能够灵活应用属性选择器，目前为止需要依靠id或class才能实现的样式利用属性选择器就能完全实现。

例如，利用[att$=val]属性选择器，可以根据超链接中的不同的文件扩展名使用不同的样式。

a[href$=html]{content:"web网页"}
a[href$=jpg]{content:"图像文件"}

上面代码中，在超链接地址的末尾为"jpg"的显示“图像文件”，为“html”的显示“web网页”