仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1079|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS伪类挑选器nth-child()

[复制链接]
柔情似水 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:16:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
破洛洛文章简介::nth-child()事情道理.
这是一个CSS选择器,一个真实的伪类选择器,它就是nth-child(),上面是利用它的典范。
ulli:nth-child(3n+3){
color:#ccc;
}
下面的css是干甚么用的,它就是在无序列内外面选择是3倍数的列。也就是第3个,第6个,第9个等等。可是它事情道理是如何的那?假如碰到别的情形你又怎样利用nth-child那?
总的来讲nth-child()圆括号内里撑持两个关头词:even与odd。他们应当很分明的,even选择偶数标签,如第2、第4、第6等等。odd选择奇数标签,如第1,第3,第5等等。
正如你在第一个例子内里看到的,nth-child()的圆括号里也撑持方程式的,是最复杂的方程式吗?仅仅是数字。假如你在圆括号内里输出一个数字,那它仅仅选择这个数量对应的谁人标签。好比,怎样仅仅选择第5个标签元素。
ulli:nth-child(5){
color:#ccc;
}
让我们回到刚入手下手例子内里的“3n+3”下面吧,他的事情道理是如何的?为何他仅仅选择3倍数的标签元素?这里就要了解“n”与数学方程式的盘算。
“n”则暗示年夜于即是0的整数。因而可知3n就是3xn,这个方程式就能够注释为”(3xn)+3″,也就是n为0或年夜于0的整数。因而我们能够失掉
(3x0)+3=3=3rdElement
(3x1)+3=6=6thElement
(3x2)+3=9=9thElement
等等
:nth-child(2n+1)又是怎样盘算的那?
(2x0)+1=1=1stElement
(2x1)+1=3=3rdElement
(2x2)+1=5=5thElement
等等
稍等!这跟“odd”是一样的!以是”1“就没有需要屡次呈现了。如今,再看我们本来的例子就感到代码庞大了些。我们能够用“3n+0”乃至“3n”取代“3n+3”.
(3x0)=0=nomatch
(3x1)=3=3rdElement
(3x2)=6=6thElement
(3x3)=9=9thElement
等等
正如你所看到的,我们不必+3就能够做到一样的效果。我们也能够利用正数。在方程式内里利用减法,如4n-1;
(4x0)–1=-1=nomatch
(4x1)–1=3=3rdElement
(4x2)–1=7=7thElement
等等
利用“-n”值看起来有点乖僻。假如方程式盘算失掉的值是正数,他就不指定任何元素标签。正如了局展现的那样,这是一个相称伶俐的手艺,你可使用“-n+3”选择选择前几个元素标签。
-0+3=3=3rdElement
-1+3=2=2ndElement
-2+3=1=1stElement
-3+3=0=nomatch
等等。
www.sitepoint.com站点有很好的参数解说与引导,包含一些手动列表。我间接公布到这里了!
n2n+14n+14n+44n5n-2-n+30114--31358432259128813713161213-4917201618-51121242023-相干文章保举
:nth-child()
Understanding:nth-childPseudo-classExpressions
中文原文:nth-child()事情道理
英文原文:Hownth-childWorks

</p>
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
小魔女 该用户已被删除
沙发
发表于 2015-1-17 21:17:52 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
爱飞 该用户已被删除
板凳
发表于 2015-1-25 23:15:07 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
山那边是海 该用户已被删除
地板
发表于 2015-2-4 13:38:53 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
乐观 该用户已被删除
5#
发表于 2015-2-10 00:53:02 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
分手快乐 该用户已被删除
6#
发表于 2015-2-28 14:09:16 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
再现理想 该用户已被删除
7#
发表于 2015-3-10 00:27:48 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
简单生活 该用户已被删除
8#
发表于 2015-3-17 04:09:52 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
再见西城 该用户已被删除
9#
发表于 2015-3-23 20:32:50 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 20:26

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表