|
[tr][td] 我们学习了nth-child和nth-last-child的高级用法，可以实现隔行变色等效果，但是它在使用的过程中有一个问题，是什么问题呢？
咱们来看下面的这个例子： [*] [*] [*] [*] [*] CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)! [*] [*] [*] [*] [*] [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] [*] [*] 从上面的代码中，我们可以发现明明设置了奇数行和偶数行的dt，按道理来讲，应该是如下图这种运行效果才对： 这是因为，nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候，是连通父级元素中的所有子元素一起计算的，换句话说，dt:nth-child(odd)这句话的含义，并不是指“当前dl列表中的第奇数个dt子元素来计算”，而是指“当前dl列表的第奇数个子元素如果是h2子元素，那么将选择它”，那么这种计算方式与我们所“理解”的这种需求怎么计算呢？ nth-of-type选择器和nth-last-of-type选择器 这两个选择器可以避免上述的问题，CSS3在计算子元素是第奇数个还是第偶数个自元素的时候，就只针对同类型的子元素进行计算了，这两个选择器的使用方法如下所示： [*] [*] [*] [*] [*] CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)! [*] [*] [*] [*] [*] [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] 前端开发网(W3Cfuns.com)! [*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！ [*] [*] [*] [/td][/tr] |
|
