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. 在Ubuntu 12.04 - 64bit中安装CodeSourcery时提示错误

    安装时提示错误,Your 64-bit Linux host is missing the 32-bit libraries requied to install and use Sourcery C ...

  2. Buildroot阅读笔记

    之前有写一篇文章:http://www.cnblogs.com/tfanalysis/p/3625430.html理清如何make menuconfig的问题,现在今天在无意间多注意了一下buildr ...

  3. leetcode[87] Partition List

    题目:给定一个链表和一个数x,将链表中比x小的放在前面,其他的放在后头.例如: Given 1->4->3->2->5->2 and x = 3,return 1-> ...

  4. C++关于数字逆序输出的两种思路，及字符串逆序输出

    C++关于数字逆序输出的两种思路,及字符串逆序输出 作者:GREATCOFFEE 发布时间:NOVEMBER 15, 2012 分类:编程的艺术 最近在跟女神一起学C++(其实我是不怀好意),然后女神 ...

  5. c#编写的基于Socket的异步通信系统

    c#编写的基于Socket的异步通信系统 SanNiuSignal是一个基于异步socket的完全免费DLL:它里面封装了Client,Server以及UDP:有了这个DLL:用户不用去关心心跳:粘包 ...

  6. EF 关系描述

    网络上常常看到有ef 1对1 1对多等关系的描述,按照我的理解,其根本就是为了呈现出一个视图,我最近设计了一个ef关系,请大家看一看. 需求描述 在gps车辆信息管理中,有个开户需求,其根本就是三种关 ...

  7. 仿async/await（一）and Gulp：新一代前端构建利器

    NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...

  8. Java、C#双语版HttpHelper类

    Java.C#双语版HttpHelper类(解决网页抓取乱码问题)   在做一些需要抓取网页的项目时,经常性的遇到乱码问题.最省事的做法是去需要抓取的网站看看具体是什么编码,然后采用正确的编码进行解码 ...

  9. Aforge.net 一个专门为开发者和研究者基于C#框架设计

    时间过得真快啊,转眼今年就要过去了,大半年都没有写博客了,要说时间嘛,花在泡妹子和搞英语去了,哈哈...前几天老大问我 怎么这么长时间都没写博客了,好吧,继续坚持,继续分享我的心得体会. 这个系列我们 ...

  10. 传说中的华为Python笔试题——两等长整数序列互换元素，序列和的差值最小(修正)

    有两个序列a,b,大小都为n,序列元素的值任意整形数,无序:要求:通过交换a,b中的元素,使[序列a元素的和]与[序列b元素的和]之间的差最小. 1. 将两序列合并为一个序列,并排序,得到source ...