css3学习总结四

第四章  根据类型为图片和链接定义样式

我们可以借助css3中新的选择器以一种更特别、高效的方式分别定位不同类型的链接和图片。  css3可以同时提升你的开发效率和页面的执行效率。

 

一个属性选择器并非只能与类型选择器关联起来使用。可以将它和任何简单的选择器组合使用。例如：.warning[title]

css2.1的属性

[attr]　　　　　　　　　　　匹配拥有attr属性的元素，与属性的取值无关

[attr=val]　　　　　　　　  匹配拥有attr属性的元素，其属性值必须刚好等于val

[attr~=val]　　　　　　　　匹配拥有attr属性的元素，其属性值是用空格分隔开来的单词列表，其中之一必须刚好等于val

[attr|=val]　　　　　　　　 匹配拥有attr属性的元素，其属性值必须刚好等于val，或者以val开始并紧跟着一个连字符

css3引入新的属性选择器

[attr^=val]　　　　匹配拥有attr属性的元素，其属性值必须以val开始

[attr$=val]　　　　匹配拥有attr属性的元素，其属性值必须以val结束

[attr*=val]　　　　匹配拥有attr属性的元素，其属性值必须包含val

 

提示：若在写一个复杂的选择器时感到困惑，可以将它贴入SelectORacle(http://gallery.theopalgroup.com/selectoracle),他用平时的英语讲解这个选择器将匹配那些目标元素

 

例子：

a[href$=".pdf"]:after{

content:"(pdf)"

}

a[href$=".pdf"]{

background-image:url(images/icon_pdf.png);

}

a[href$=".doc"]{

background-image:url(images/icon_doc.png);

}

a[href$=".mov"]{

background-image:url(images/icon_film.png);

}

a[href$=".jpg"]{

background-image:url(images/icon_photo.png);

}

 

下面的例子是针对ie6的兼容问题和禁用脚本后，ie6 依然会读取ul  a  这条规则，它会给每个链接增加额外的内边距，从而使ie6上的链接之间出现不必要的空白问题（加了[href]）

 

ul a[href]{

   background-position: 0 3px;

    background-repeat: no-repeat;

    display: block;

    min-height: 15px;

    padding-left: 20px;

}

.ie6 ul a[href]{

       display:inline-block;

       white-space:nowrap;

}

 

容错措施

若将一个类选择器和一个属性选择器分组到一起，那么ie6会忽视整条规则。

为了解决这个问题，必须将规则分开书写。Like  this：

mg[src*=thumbnails]{

       float: left;

       margin: 0 20px 10px 0px;

}

img .thumbnails{

       float: left;

       margin: 0 20px 10px 0px;

}

 

 

img[src*=photos]{

       padding:5px 5px 30px 5px;

       background:#fff;

       -moz-box-shadow:3px 6px 8px -4px #999;

       -webkit-box-shadow:3px 6px 8px -4px #999;

       box-shadow:3px 6px 8px -4px #999;

       -moz-transform: rotate(2deg);

       -o-transform: rotate(2deg);

       -webkit-transform: rotate(2deg);

       transform: rotate(2deg);

}

应用：

为拥有title属性的元色增加视觉提示（[title]）

为不容语言制定不同样式（[lang|=en]）

为不同的表单域设置独特的样式（input[type=submit]）

为导航型div元素里的列表隐藏“小圆点”(Bullet)(比如用div[id^=nav]匹配<div id="nav-primary">和<div id="nav-secondary">)

为电子邮件链接指定样式 (a[href^=mailto])

为站外链接（a[href^=http]和a[rel=external]）等

为链接显示快捷键提示（a:after{content:'['attr(acdesskey)']'}）.

为元素标签显示引用来源(@@[cite]:after{content:attr(alt)})

把图片的替代文字作为标题显示(img[alt]:after{content:attr(alt)})

为ie6隐藏某些样式规则。