仓酷云

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

[DIV+CSS] 来讲讲:CSS实例教程::nth-child和:nth-type-of的区分

[复制链接]
活着的死人 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:14:23 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

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

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

x
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
破洛洛文章简介::nth-child和:nth-type-of的区分.
原文:TheDifferenceBetween:nth-childand:nth-of-type
译文::nth-child和:nth-type-of的区分
假定有以下HTML代码:
  1. <section><p>Little</p><p>Piggy</p><!--方针元素--></section>
复制代码
以下代码失掉的效果一样:
  1. p:nth-child(2){color:red;}p:nth-of-type(2){color:red;}
复制代码
了局固然不异,可是二者自己仍是有所区分的。

:nth-child选择符从词义下去说,暗示,
选择满意以下前提的元素:


  • 1.是一个段落元素p
  • 2.是父元素的第二个子元素
:nth-of-type选择符从词义下去看,暗示:


  • 1.选择父元素的第二个段落元素p
:nth-of-type是…怎样说好呢,哈~…较少前提要约的。
假定布局变更以下:
  1. <section><h1>World</h1><p>Little</p><p>Piggy</p><!--方针元素--></section>
复制代码
那末,这类体例就“破”了:
  1. p:nth-child(2){color:red;}
复制代码
可是,这个仍是”能用”的:
  1. p:nth-of-type(2){color:red;}
复制代码
所谓的“破”,意义是下面的:nth-child选择符如今选到的是“Little”,而不是“Piggy”,由于这个元素满意以下一切前提:


  • 1)它是第二个字元素
  • 2)它是一个段落元素p
所说的“能用”,意义是“Piggy”仍旧被选中,由于它是它父元素下的第二个段落元素p。
假如在h1以后增添一个h2,那末:nth-child选择符就甚么也选中不了了,由于当时第二个子元素就不再是段落元素p了。可是:nth-of-type仍旧仍是无效的。
我感到:nth-of-type绝对不那末懦弱,并且总的来讲加倍有效,只管:nth-child加倍罕见(作者团体定见)。你有几时分在想“我想选择父元素的第二个子元素,假如它刚巧是个段落元素p”这事呢?大概有那末几回,可是更多的多是你想“选中第二个段落”大概“每隔两行选择一行(selecteverythirdtablerow)”,也就是说:nth-of-type是加倍好的一个选择(再次声明,作者团体定见)。
我发明当我埋怨“为何:nth-child选择符不可?”时,相对多半的情形是由于在选择符前限制了标签,而谁人地位的子元素不是谁人标签。因而在利用:nth-child时,我以为最好仍是只指定父元素而且不要用标签来限定:nth-child。
  1. dl:nth-child(2){}/*保举*/dd:nth-child(2){}/*不是很好*/
复制代码
固然,详细情形还得详细剖析。(我咋这么不喜好这句话呢&ndash;糖伴西红柿)
扫瞄器关于:nth-of-type的撑持是相称不错的…Firefox3.5+,Opera9.5+,Chrome2+,Safari3.1+,IE9+。假如必要更多的撑持,jQuery应当会挺你的(利用选择符,增加一个类名,利用类名来增加款式$(“selector:nth-child(xxxxx)”).addClass(“someClass”)),可是实践上jQuery却保持了对:nth-of-type的撑持,这很奇异啊,听说是由于:nth-of-type的利用率很低。有个插件可使得jQuery撑持它。
相干:不要忘了它这些了不得姊妹们:first-of-type:last-of-type:nth-last-of-type和:only-of-type。更多请看这里。
这里有一个LeaVerou做的可视化示例。
</p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
冷月葬花魂 该用户已被删除
10#
发表于 2015-3-25 08:22:51 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
柔情似水 该用户已被删除
9#
发表于 2015-3-17 22:09:32 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
再见西城 该用户已被删除
8#
发表于 2015-3-17 22:09:36 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
蒙在股里 该用户已被删除
7#
发表于 2015-3-11 04:16:18 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
6#
发表于 2015-3-2 01:24:13 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
金色的骷髅 该用户已被删除
5#
发表于 2015-2-11 08:04:24 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
变相怪杰 该用户已被删除
地板
发表于 2015-2-5 06:27:38 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
只想知道 该用户已被删除
板凳
发表于 2015-1-26 22:49:58 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
第二个灵魂 该用户已被删除
沙发
发表于 2015-1-17 20:52:09 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 02:14

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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