18章.CSS3概述

1.从前端技术的角度把互联网的发展分为三个阶段：

（1）web1.0:HTML和CSS。

（2）web2.0：Ajax，Javascript/DOM/异步数据请求。

（3）web3.0：HTML5和CSS3。

2.CSS3采用分工合作的模块化结构，它有各种模块来定义相关的样式和功能，这样的做的原因是避免产生浏览器对于某个模块支持不完全的情况。（这样各大浏览器可以选择对什么模块进行支持，什么模块不支持。）

19章.选择器

1.选择器概述

在css2中，我们经常使用元素的class属性来设置样式，这样做的两个缺点是：

（1）class属性本身没有语义，纯粹用来为css样式服务，属于多余属性。

（2）使用class属性，没有把样式与元素绑定起来，针对同一class属性，不同的元素都可以使用，这样会导致混乱，修改样式时也会不方便。

所以，在css3中，提倡使用选择器来将样式与元素直接绑定起来，采用E[foo$=”val”]（属性选择器）这种正则表达式的形式。

eg：

 <body>
     <div id="test">linshuling</div>
     <div id="test1">linsuli</div>
 </body>

css

 <style type="text/css">
         div[id="test"]{background: pink;}
     </style>

2.通配符：

（1）“^”通配符：开通字符匹配。

eg：

 <body>
     <div id="test">linshuling</div>
     <div id="test1">linsuli</div>
     <div id="t1">linsuli</div>
     <div id="1">linsuli</div>
 </body>

css

 <style type="text/css">
         div[id^="t"]{background: pink;}
     </style>

（2）“$”通配符：结尾字符匹配。

eg：

 <style type="text/css">
         div[id$="1"]{background: pink;}
     </style>

（3）“*”通配符：包含字符匹配。

eg：

 div[id*="e"]{background: pink;}

3.属性选择器

以上为CSS3中追加的三个属性选择器：[att*=val],[att^=val],[att$=val],其中att表示元素的属性，val表示属性的属性值。

（1）[att*=val]，如果元素用att表示的元素的属性值中包含用val指定的字符，则该元素使用这个样式。

（2）[att^=val]，如果元素用att表示的属性的属性值的开头字符为用val指定的字符，则该元素使用这个样式。

（3）[att$=val]，如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式。

eg：

 <div id="test-1">lin</div>
     <div id="test1">linsuli</div>
     <div id="t1">linsuli</div>
     <div id="1-1">linsuli</div>
 <style type="text/css">
         div[id$=\-1]{background: pink;}
     </style>

注意：当属性值不用“”括起来时，该属性选择器中在指定匹配字符前必须加上“\”这个escape字符。或者是写成：div[id$=“-1”]{background: pink;}

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

eg：

 <ul>
         <li><a href="http://linshuling/">HTML5+CSS3权威指南</a></li>
         <li><a href="http://linshuling/css.html">CSS3的特性</a></li>
         <li><a href="test.jpg">图片素材</a></li>
     </ul>
 a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
             content: "web网页";
             color:red;
         }
         a[href$=jpg]:after{
             content: "jpge图像文件";
             color:green;
         }

H5与CS3权威下.18 and 19 选择器（1）的更多相关文章

  1. H5与CS3权威下.19 选择器（2）结构性伪类选择器

    1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...

  2. H5与CS3权威上.5 绘制图形（1）

    1.canvas元素基础知识 (1)在页面上放置canvas元素,相当于在页面上放置一块"画布",可以用Javascript编写在其中进行绘画的脚本. (2)在页面中放置canva ...

  3. 通通玩blend美工（6）下——仿iPhone滚动选择器的ListBox（交互逻辑）

    原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblo ...

  4. Windows7下PHP5.6.19+Apache2.4.18+MySql5.7环境配置

    此安装参考了网上各方资料,最终整理的内容为本次安装涉及的部分. 一.准备安装材料: 1.从http://windows.php.net/download/ 下载5.6.19 线程安全版(使用apach ...

  5. OpenGL第18，19，20讲小结

    18讲是通过调用库函数画一些简单的二次几何体,比如球体.圆锥体.圆盘等等. 19讲简单的讲了下粒子系统.其实就是三角形贴上星星的纹理,通过启用混合(GL_BLEND)来达到一种动态的粒子效果.通过修改 ...

  6. 《linux就该这么学》第十七节课：第18，19，23章，mariadb数据库、PXE无人值守安装系统和openldap目录服务。

    第23章 (借鉴请改动) openldap数据的特点:1.短小.2.读取次数较多 上述说明: openLDAP服务端配置:     1.yum install -y openldap openldap ...

  7. CentOS下常用的 19 条命令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...

  8. 小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏

    五子棋小游戏学习—— 有一个问题是,棋盘线的颜色,在canvas中,明明设置了灰色,但在我的预览中还是黑色的,很重的颜色. 以下是复刻的源码: <!DOCTYPE html> <ht ...

  9. linux下18种监测网络带宽方式

    1. nload nload是一个命令行工具,让用户可以分开来监控入站流量和出站流量.它还可以绘制图表以显示入站流量和出站流量,视图比例可以调整.用起来很简单,不支持许多选项. 所以,如果你只需要快速 ...

随机推荐

  1. JavaScript中对数组的操作

    原文:JavaScript中对数组的操作 一:数组的使用 1.定义:JavaScript中对数组的定义有两种形式.如: .var arr = [12,3,5,8]; .var arr = new Ar ...

  2. D3D 光照和材料 小样例

    1.实现一个旋转的圆柱体,体现d3d光照效果 2.程序实现 #pragma once #pragma comment(lib,"winmm.lib") #pragma commen ...

  3. Android高仿雅虎天气(两)---代码结构分析

    版本已经升级到1.0.1 源码地址: GitHub:https://github.com/way1989/WayHoo OsChina:http://git.oschina.net/way/WayHo ...

  4. asp.net访问WebService的各种方式

    WebService的访问形式主要有:SOAP调用.XMLHTTP POST.GET调用.MicroSoft.XMLDOMC调用.webbehavior.htc调用 我们知道的在C#后台本地调用Web ...

  5. NhibernateProfiler-写个自动破解工具(源码)

    04 2013 档案   [屌丝的逆袭系列]是个人都能破解之终结NhibernateProfiler-写个自动破解工具(源码) 摘要: 破解思路分析及手动破解 增加“附加到进程”功能--功能介绍增加“ ...

  6. C#动态表达式计算(续2)

    上两篇废话太多,这一次我就不多说了,由于代码比较简单,可以直接从https://github.com/scottshare/DynamicExpress.git地址下载. 以下说明一下使用方法: Dy ...

  7. thrift之TTransport层的内存缓存传输类TMemoryBuffer

    内存缓存是简单的在内存进行读写操作的一种传输,任何时候想在上面写入数据都是放入缓存中,任何时候读操作数据也是来至于缓存.内存缓存的分配使用c语言的malloc类函数,分配的长度是需要长度的两倍,需要考 ...

  8. C# STA和MTA线程设置

    参考资料: http://www.yesky.com/20010207/158097.shtml http://www.ftponline.com/china/XmlFile.aspx?ID=242 ...

  9. Event notifications

    SQL Server 事件通知(Event notifications) 2013-12-13 17:21 by 听风吹雨, 333 阅读, 3 评论, 收藏, 编辑 一. 背景 SQL Server ...

  10. vijos1004 博弈论

    一道挺简单的博弈论题 感觉自己也没有很规范的学过博弈论吧,就是偶尔刷到博弈论的题目,感受一下推导的过程,大概能领悟些什么 我们设2001.11.4必败,推上去,即2001.10.4和2001.11.3 ...