css的学习1

这几天在学校就剩下一门课还没考试,所以这几天很闲,有时间就去图书馆淘书,昨天看到一本CSS3,觉得自己的前台做的确实不是很好,就在那儿看会儿,确实没让自己失望,确实不错的一本书,可能是之前觉得自己是.net的学生所以一直都忽略了前台,昨天看到CSS3的时候,确实令自己挺激动的,因为之前自己忽略的自己又想捡回来了,嘻嘻,希望不会晚,看了一点儿,做了点儿小练习


我看的书是《CSS3实战》


做了前两个小练习:

第一个练习觉得用的就是匹配字符串,这是CSS3新增的属性选择器,

E[foo^"bar"]匹配前缀是“bar”的子字符串;

E[foo$="bar"]匹配后缀是“bar”的子字符串;

E[Foo*="bar"]匹配包含“bar”的子字符串;

  用法:

View Code
1 a[href^="http:"]{
2     background:url(image/gold.png) no-repeat left center;
3     padding-left:18px;
4 }
5 a[href$="pdf"]{
6     background:url(image/pdf.png) no-repeat left center;
7     padding-left:28px;
8 }

第一个是匹配前缀是'http“的链接,如果不是则说明不匹配,不是合适的链接,如果合适就会在左边加一张图片

第二个是匹配后缀是“pdf”的字符,如果不是则不匹配,合适就会在左边加另一幅图片


第二个练习用的是结构伪类选择器:是利用文档结构树实现元素过滤即通过文档结构的相互关系来匹配特定的元素,从而减少文档内对class属性和ID属性的定义

E:nth-child(n)选择所有在其父元素中第n个位置的匹配E的子元素;

E:nth-last-child(n)选择所有在其父元素中倒数第n个位置的匹配E的子元素;

用法:

View Code
1 tr:nth-child(2n+1){
2     background-color:#f5fafe;
3 }
4 tr:nth-last-child(3){
5     background-color:#060;
6 }

觉得CSS很强大,就是借的这本书没有配套的素材下载,有没有谁有这些素材,可以发给我吗?

原文地址:https://www.cnblogs.com/netqin/p/2553323.html