首页 > > 网页制作 > css >

H5与CS3权威下.18 and 19 选择器（1）

2018-06-24 00:53:34来源：未知阅读 ()

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：

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>

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>

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

eg：

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

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

eg：

1 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：

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         }