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. printf详解

    用了这么多年c了,今天想编个小程序练练手,忽然发现对于printf这个函数并不甚了解.上网查了查,下面是对printf()的详解: 函数原型: #include <stdio.h> int ...

  2. LinQ—扩展方法

    概述 本节主要解说扩展方法,涉及LinQ的详细知识不多. 扩展方法的描写叙述 .net framework为编程人员提供了非常多的类,非常多的方法,可是,不论.net framework在类中为我们提 ...

  3. TodoList开发笔记 – Part Ⅱ

    上一节给出了应用的两个主要UML类图,应用采用的技术也给出了,这一节开始实际设计编码 一.应用公开的方法 其实就几个的方法而已 1.代办事项的CRUD 2.代办事项归类目录的CRUD 3.代表事项“已 ...

  4. 实时预览的在线 Markdown 编辑器 - Markdoc

    实时预览的在线 Markdown 编辑器 - Markdoc 最近组内需要为一些项目和系统写文档,发表在公司内的文档平台上,这个平台并不支持markdown,所以打算做一个在线markdown编辑器, ...

  5. asp.net mvc放在iis7.5中提示404错误 js异步请求失效解决办法

    asp.net mvc中js发请求一般写成: $.get("/Can/index"本地上是没有问题的但是部署到iis上,提示404,正确的请求的路径是:/网站名/Can/index ...

  6. Dynamics CRM 多个Form显示不同的Ribbon按钮

    昨天群里熊宸(Microfoft MVP)给大家分享了以“Dynamics CRM 客户端编程概况”为主题,在群里给大家做了一次精彩的分享. 一些朋友聊到了Ribbon按钮在Form上的显示问题,因为 ...

  7. Coursera台大机器学习基础课程1

    Coursera台大机器学习基础课程学习笔记 -- 1 最近在跟台大的这个课程,觉得不错,想把学习笔记发出来跟大家分享下,有错误希望大家指正. 一 机器学习是什么? 感觉和 Tom M. Mitche ...

  8. vs2012+Spring.Core.dll

    Ⅰ.Spring的点点滴滴--序章   spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架 .net篇(环境为vs2012+Spring.Core.dll) 新建一个控制台 u ...

  9. C#类的初始化

      类的构造函数 类的构造函数,有实例构造函数和静态构造函数.如果我们没有构造函数,系统会为我们生成一个默认构造函数,如果我们已经定义了构造函数,系统就不会再为我们生成构造函数. class Simp ...

  10. SublimeText编辑器替代notepad++了

    可以考虑使用SublimeText编辑器替代notepad++了   内容目录: 插件安装配置 配置打包下载 大概是去年吧,这款编辑器神一般的出现在我面前,经过我小心翼翼的试用后发现并不是那么太顺手, ...