仓酷云

标题: 来讲讲：CSS实例教程：:nth-child和:nth-type-of的区分 [打印本页]
作者: 活着的死人    时间: 2015-1-15 23:14
标题: 来讲讲：CSS实例教程：:nth-child和:nth-type-of的区分
搜索引擎更加友好。相对与传统的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选择符从词义下去说，暗示，
选择满意以下前提的元素：

:nth-of-type选择符从词义下去看，暗示：

: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”，由于这个元素满意以下一切前提：

所说的“能用”，意义是“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。
作者: 第二个灵魂    时间: 2015-1-17 20:52
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
作者: 只想知道    时间: 2015-1-26 22:49
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
作者: 变相怪杰    时间: 2015-2-5 06:27
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
作者: 金色的骷髅    时间: 2015-2-11 08:04
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。
作者: 仓酷云    时间: 2015-3-2 01:24
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 蒙在股里    时间: 2015-3-11 04:16
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 柔情似水    时间: 2015-3-17 22:09
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
作者: 再见西城    时间: 2015-3-17 22:09
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
作者: 冷月葬花魂    时间: 2015-3-25 08:22
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。



欢迎光临 仓酷云 (http://www.ckuyun.com/) Powered by Discuz! X3.2