AjaxH5与CS3高不可攀下.18 and 19 选用器(1)

18章.CSS3概述

1.此前端技术的角度把互连网的向上分为八个等级:

(1)web1.0:HTML和CSS。

(2)web2.0:Ajax,Javascript/DOM/异步数据请求。

(3)web3.0:HTML5和CSS3。

2.CSS3应用分工合营的模块化结构,它有各个模块来定义相关的体裁和功力,那样的做的原故是幸免生出浏览器对于某些模块帮助不完全的意况。(那样各大浏览器能够挑选对怎么着模块实行支撑,什么模块不协助。)

 

 

19章.选择器

 

1.选用器概述

在css第22中学,大家常常采用要素的class属性来安装样式,那样做的七个毛病是:

(1)class属性本人没有语义,纯粹用来为css样式服务,属于多余属性。

(2)使用class属性,没有把体制与元素绑定起来,针对同一class属性,分裂的要素都得以使用,那样会导致混乱,修改样式时也会不便宜。

 

从而,在css3中,提倡使用选取器来将样式与成分直接绑定起来,采纳E[foo$=”val”](属性采纳器)那种正则表达式的花样。

eg:

1 <body>
2     <div id="test">linshuling</div>
3     <div id="test1">linsuli</div>
4 </body>

css

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

Ajax 1

2.通配符:

(1)“^”通配符:开通字符匹配。

 eg:

1 <body>
2     <div id="test">linshuling</div>
3     <div id="test1">linsuli</div>
4     <div id="t1">linsuli</div>
5     <div id="1">linsuli</div>
6 </body>

css

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

Ajax 2

(2)“$”通配符:结尾字符匹配。

eg:

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

Ajax 3

(3)“*”通配符:包括字符匹配。

eg:

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

Ajax 4

 

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:

1 <div id="test-1">lin</div>
2     <div id="test1">linsuli</div>
3     <div id="t1">linsuli</div>
4     <div id="1-1">linsuli</div>

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

专注:当属性值不用“”括起来时,该属性选用器中在钦点匹配字符前必须抬高“\”这些escape字符。大概是写成:div[id$=“-1”]{background:
pink;}

 

4.利用[att$=val]天性采用器,能够遵照超链接中区别的文件扩大符使用不一样的体裁。

eg:

1 <ul>
2         <li><a href="http://linshuling/">HTML5+CSS3权威指南</a></li>
3         <li><a href="http://linshuling/css.html">CSS3的特性</a></li>
4         <li><a href="test.jpg">图片素材</a></li>
5     </ul>

1 a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
2             content: "web网页";
3             color:red;
4         }
5         a[href$=jpg]:after{
6             content: "jpge图像文件";
7             color:green;
8         }

Ajax 5

 

相关文章