CSS3实例教程:新提升的构造伪类

日期:2021-03-15 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图


CSS 3提升了很多的构造伪类,运用文本文档构造树来完成主要表现,从而能够降低网页页面内class特性和ID特性的界定,使得文本文档更为简约。
有关阅读文章文章内容:CSS3特性挑选符详细介绍
4.7.3 构造伪类(Structural pseudo-classes)
CSS 3提升了很多的构造伪类,运用文本文档构造树来完成主要表现,从而能够降低网页页面内class特性和ID特性的界定,使得文本文档更为简约。
下列示例,请应用Win XP的Google Chrome或MAC OS X的Safari 3.1查询。
1. E:root
配对文本文档的根元素。在(X)HTML中,根元素便是<html>元素。比如:
:root { border: 1px solid blue; }
在(X)HTML文本文档中,其实际效果等同于于:
html { border: 1px solid blue; }
2. E:nth-child(n)
配对全部在其父元素中排第n个的E元素。n能够是数据/重要字/公式,比如:
tr:nth-child(3) { …… } /* 配对全部报表里边排第3的行<tr> */ tr:nth-child(2n 1) { …… } /* 2n 1,公式,配对全部单数行 */ tr:nth-child(odd) { …… } /* odd:重要字,配对全部单数行 */ tr:nth-child(2n) { …… } /* 2n:配对全部偶数行*/ tr:nth-child(even) { …… } /* even:重要字,配对全部偶数行li */ 留意:元素的第1个子元素数据库索引为“1”。
运用这个伪类,能够很非常容易地完成双情况色乃至多情况色报表等实际效果。
比如有xhtml以下:
<ol id="sample1"> <li>目录项哦目录项</li> <li>目录项哦目录项</li> <li>目录项哦目录项</li> <li>目录项哦目录项</li> </ol>
CSS以下:
#sample1 li:nth-child(even) { /* #sample1的子元素中排列为单数的li */ background:#FF9; /* 还可以设置float、margin、border等特性 */ } #sample1 li:nth-child(odd) { background:#FC3; }
其显示信息如图4⑷1所示。

图4⑷1 E:nth-child(n)的运用1
还可以完成3色乃至多色的情况。比如以下编码:
#sample2 li:nth-child(3n 1) { background:#F90; } #sample2 li:nth-child(3n 2) { background:#Fc3; } #sample2 li:nth-child(3n) { background:#FF9; } <ol id="sample2"> <li>目录项哦目录项</li> <li>目录项哦目录项</li> …… </ol>
其显示信息如图4⑷2所示。

图4⑷2 E:nth-child(n)的运用2
此时需留意的是,3n 1表明的是3行循环系统内的第1行,而3n则是第3行。
另外,还可以特定某1个特殊的子元素,比如以下编码:
#sample3 li:nth-child(1) { color:#F00; } #sample3 li:nth-child(2) { color:#F60; } #sample3 li:nth-child(3) { color:#FC0; } <h4>前3名不一样显示信息的排行榜</h4> <ol id="sample3"> <li>目录项哦目录项</li> <li>目录项哦目录项</li> <li>目录项哦目录项</li> …… </ol>
各自特定了第1、2、3个li的市场前景色调color,其显示信息如图4⑷3所示。

图4⑷3 E:nth-child(n)的运用3
还可以为同1列的模块格td特定同样的情况色:
#sample4 td:nth-child(3n 1) { background:#FCC; } #sample4 td:nth-child(3n 2) { background:#F99; } #sample4 td:nth-child(3n 3) { background:#C6F; } <table border="0" cellspacing="0" cellpadding="0" id="sample4"> <tr> <td>1⑴</td> <td>1⑵</td> <td>1⑶</td> </tr> …… </table>
其显示信息如图4⑷4所示。

图4⑷4 E:nth-child(n)的运用4
可是,必须非常留意的是,父元素内全部的子元素都参加排列,而不管元素的种类是甚么,在上面的事例中,子元素的种类全是单1的(li或td),而下面这个事例中,子元素的种类已不单1(包含dt和dd):
<dl id="sample5"> <dt>dt 1,总排行1</dt> <dd>dd 1,总排行2</dd> <dt>dt 2,总排行3</dt> <dd>dd 2,总排行4</dd> <dd>dd 3,总排行5</dd> <dt>dt 3,总排行6</dt> <dt>dt 4,总排行7</dt> <dd>dd 4,总排行8</dd> </dl>
假如设置以下的CSS,那末其显示信息的实际效果则如图4⑷5所示。
#sample5 dt { font-weight:bolder; } #sample5 dt:nth-child(odd){ background:#6CF; }

图4⑷5 E:nth-child(n)包含父元素内全部种类的子元素
由图4⑷5读者能够发现,分辨dt是不是为单数的标准是其在子元素内总排列,而并不是dt元素独立排列。
案例演试以下:

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]
上一篇:怎样让企业网站更有吸引住力 返回下一篇:没有了