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. solr主从复制

    solr主从复制 最近的开发工作涉及到两个模块“任务”和“日周报”.关系是日周报消费任务,因为用户在写日周报的时候,需要按一定的规则筛选当前用户的任务,作为日周报的一部分提交.整个项目采用类似于Orc ...

  2. 与6lowpan最相关的RFC文档列表

    有关于6lowpan最原始的文档,请参考下面的链接与截图: http://datatracker.ietf.org/wg/6lowpan/

  3. 【原创】窥视懒人的秘密---android下拉刷新开启手势的新纪元

    小飒的成长史原创作品:窥视懒人的秘密---android下拉刷新开启手势的新纪元转载请注明出处 **************************************************** ...

  4. mysql支持的数据类型及其测试

    原文:mysql支持的数据类型及其测试 1.基础知识 1.1如何来查看mysql的帮助手册 ?int Help float; 1.2创建表的规则 CREATE TABLE [IF NOT EXISTS ...

  5. Mysql高级之权限检查原理

    原文:Mysql高级之权限检查原理 用户进行数据库操作分为两步: 1 是否有权限连接,根据host,name,password: 2 是否有权限进行CURD: 图示解说: 关于用户权限在哪里进行存放? ...

  6. [转]Windows下搭建PHP开发环境

    原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要 ...

  7. android gps开发必备资料(含测试demo下载)

    入门资料参考: How accurate is Android GPS? Part 1: Understanding Location Data How accurate is Android GPS ...

  8. EditPlus 3设置字体大小

    EditPlus设置字体大小 tools ---> preferences ---> fonts

  9. 重温HTML的基础

    新年新气象,新的一年要有自己的学习计划与工作计划.希望大家能够共享. 经过一段时间,我想重新复习与学习一下HTML的基础,我呢打算整理一下W3C里面的知识,也许对某些人没有任何作用,但是对我来说这是我 ...

  10. String和StringBuilder的使用

    如果有理解错误的地方希望有朋友能指出,谢谢!   String是特殊的引用类型的,更像值类型,StringBuilder的是规规矩矩引用类型的.   首先看这样的对比图,Equals()方法是判断两个 ...