CSS3属性选择符及其伪类
CSS3增加了很多非常有用的选择符及其伪类，利用这些新的技术，可以在我们的日常工作中节省不少的时间，并且减少HTML及CSS文件的大小。
今天主要介绍一下CSS3新增加的属性选择符和伪类。下表仅是其中的一部分，有些伪类没有在下面表中，如:root等伪类。
CSS3选择符语法概览：
1. 字串匹配的属性选择符：
a) E[att^="val"] 匹配具有att属性、且值以val开头的E元素
例如：
<div class="no001">1</div>
<div class="no002">2</div>
<div class="yes003">3</div>
<div class="yes004">4</div>
<div class="no005">5</div>
CSS代码：
div[class^="no"] {background:#F00;}这个代码表示：class属性以”no”开头的div元素背景颜色将会是红色（#F00）;
查看演示b) E[att$="val"]匹配具有att属性、且值以val结尾的E元素
例如：
<div class="xunzou">1</div>
<div class="kaizou">2</div>
<div class="dazou">3</div>
<div class="yes004">4</div>
<div class="no005">5</div>
CSS代码：
div[class$="zou"] {background:#000;}这个代码表示：class属性以”zou”结尾的div元素背景颜色将会是黑色（#000）;
查看演示c) E[att*="val"] 匹配具有att属性、且值中含有val的E元素
例如：
<div class="abcde">1</div>
<div class="abc">2</div>
<div class="de">3</div>
<div class="abd">4</div>
<div class="bce">5</div>
CSS代码：
div[class*="ab"] {background:#CCC;}这个代码表示：class属性的值包含有”ab ”的div元素背景颜色将会是灰色（#CCC）;
查看演示我们其实可以用这个属性选择符来做一个这样的事情，比如说你的网站上有外站的连接，比如说友情连接等，你可以用属性选择符来匹配包含http值的元素使其后面增加一个小图标（注意本站的文章中已经有类似的效果）。但是有时候自己的站也会加上绝对地址，这样的话，站内连接也会加上图标了。我们可以再次使用属性选择符来消除上面的本站内的效果。
例如：
a[href^=”http://”] , a[href^=”https://”] {/*现在一些站也有以https连接的，所以要加上这个。*/
padding:0 15px 0 0;/*右边空出15px来放置小图片*/
background:url(图片地址) no-repeat right top;/*将图片放置与右上角*/
}
a[href*=”xunzou”]{ /*这里以我的网站为例，取消站内连接的小图标*/
padding:0;/*去掉右边空出的15px*/
background:none;/*去掉图片*/
}2. 结构性伪类
a) E:nth-child(n) 匹配父元素中的第n个子元素E
这个元素在你做列表或者数据表格的时候将非常有用。例如：E:nth-child(2) 在这里的数字2.将选中第二行。最常见的“隔行换色”就可以用这个伪类轻松的做出。例如：E:nth-child(2n+1){background:#F00};这个是隔行换色。这里的n可以取任何整数值，你也可以给n取和负值。
这里是一些常用的取值，希望可以帮助大家理解这个属性。
这里有个网址你可以测试它的数值以及产生的效果：
http://css-tricks.com/examples/nth-child-tester/关于E:nth-child(n)的一些其他文章：
http://css-tricks.com/how-nth-child-works/http://devsnippets.com/article/5-advanced-css-pseudo-class.html
查看演示
b) E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
这个匹配的是父元素中倒数第n个子元素。例如：
#nthlc li:nth-last-child(2) {
background: #999;/*这里第五个li将会显示背景色为灰色（#999）*/
}
CSS代码：
<ul id=”nthlc”>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
</ul>
查看演示
c) E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
例如：
#nthot em:nth-of-type (2) {
background: #999;/*这里第2个em将会显示背景色为灰色（#999）*/
}
html代码：
<div id=”nthot”>
<p>这里是第1个p</p>
<p>这里是第2个p</p>
<em>这里是第1个em</em>
<em>这里是第2个em</em>
<p>这里是第3个p</p>
</div>
查看演示
d) E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
例如：
#nthlc em:nth-last-of-type(2) {
background: #999;/*这里第1个em将会显示背景色为灰色（#999）*/
}
html代码：
<div id=”nthlot”>
<p>这里是第1个p</p>
<p>这里是第2个p</p>
<em>这里是第1个em</em>
<em>这里是第2个em</em>
<p>这里是第3个p</p>
</div>
查看演示
e) E:last-child匹配父元素中最后一个E元素
例如：
#lc p:last-child {
background: #999;/*这里最后一个p将会显示背景色为灰色（#999）*/
}
html代码：
<div id=”lc”>
<p>这里是第1个p</p>
<p>这里是第2个p</p>
<em>这里是第1个em</em>
<em>这里是第2个em</em>
<p>这里是第3个p</p>
</div>
查看演示
f) E:first-of-type匹配同级兄弟元素中的第一个E元素
例如：
#fot p:first-of-type{
background: #999;/*这里第1个p将会显示背景色为灰色（#999）*/
}
html代码：
<div id=”fot”>
<em>这里是第1个em</em>
<em>这里是第2个em</em>
<p>这里是第1个p</p>
<p>这里是第2个p</p>
<p>这里是第3个p</p>
</div>
查看演示
g) E:only-child匹配属于父元素中唯一子元素的E
例如：
#oc p:only-child{
background: #999;/*这里唯一的1个p将会显示背景色为灰色（#999）*/
}
html代码：
<div>
<em>这是div里的1个em</em>
</div>
<div>
<p>这里div里的第1个p和em不在同一个父元素</p>
<p>这里div里的第2个p</p>
</div>
查看演示
h) E: only-of-type 匹配属于同类型中唯一兄弟元素的E
例如：
#pc08 p:only-of-type {
background: #999;/*这里唯一的1个p将会显示背景色为灰色（#999）*/
}html代码：
<div class="Pc" id="pc08">
<h3>E:only-of-type</h3>
<em>这里是第1个em</em>
<em>这里是第2个em</em>
<p>这里是唯一的1个p</p>
<em>这里是第3个em</em>
<em>这里是第4个em</em>
</div>
查看演示
i) E:empty匹配没有任何子元素（包括text节点）的原色E
例如：
div em:empty{
background: #999;/*这里空元素p将会显示背景色为灰色（#999）*/
}html代码：
<div>
<p>这里是第1个p</p>
<p></p>
<em>上面第二个p背景色为灰色</em>
</div>
查看演示
j) E:target匹配相关URL指向的E元素
例如：
div p:target{
background: #999;/*这里空原色p将会显示背景色为灰色（#999）*/
}html代码：
<div>
<p><a href=”#pid”这里是第1个a</a></p>
<p>这是第二个p</p>
<p id=”pid”>这是第三个p，有个id是pid，这个会变色</p>
</div>
查看演示
k) E:not(s) 匹配所有不匹配简单选择符s的元素E
例如：
div p:not(.ab){
background: #999;/*这里.ab将没有背景色，其它p显示背景色为灰色（#999）*/
}html代码：
<div>
<p class="ab">这里是第1个p</p>
<p class="cd">这里是第2个p</p>
<p>这里是第3个p</p>
</div>查看演示
l) E ~ F匹配E元素之后的F元素
例如：
div p:not(.ab){
background: #999;/*这里.ab将没有背景色，其它p显示背景色为灰色（#999）*/
}html代码：
<div>
<p class="ab">这里是第1个p</p>
<p class="cd">这里是第2个p</p>
<p>这里是第3个p</p>
</div>查看演示
这里基本上罗列的一些css3的属性选择符以及伪类，还有一些没有写上。欢迎大家拍砖。感谢腾 讯Webteam 开发的CSS3手册，以上有一部分内容参考了CSS3手册。
浏览器支持：以上12个伪类仅E ~ F 兄弟选择器IE6以上浏览器支持外，其他IE6及其以下浏览器均不支持。但是最新的firefox、opera、Safari 和chrome都支持这些伪类。
0 条留言
我要留言