WAP网站制作.ppt

移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发框架分析和选择 移动Web开发和调试工具 移动Web开发和调试工具 :nth-child( )可以选择某个元素的一个或多个特定的子元素，你可以按这种方式进行选择： :nth-child(length) /*参数是具体数字*/ :nth-child(n) /*参数是n,n从0开始计算*/ :nth-child(n*length) /*n的倍数选择，n从0开始算*/ :nth-child(n+length) /*选择大于length后面的元素*/ :nth-child(-n+length) /*选择小于length前面的元素*/ :nth-child(n*length+1) /*表示隔几选一*/ //上面length为整数 IE6-8浏览器不支持:nth-child选择器。 （3-3）:nth-child() :nth-child()可以定义他的值（值可以是整数，也可以是表达式），如上面所示，用来选择特定的子元素。 例如： :nth-child(3),选择某元素下的第三个子元素，（这里的3可以是你自己需要的数字），比如说，我需要选择列表中的第三个li元素，那么我们可以直接这样使用： .demo li:nth-child(3) {background: lime;} 这种不式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。 效果如下所示： （3-3）:nth-child() :nth-child(n)，其中n是一个简单的表达式，那么n取值是从“0”开始计算的，到什么时候结束不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用:nth-child(n),那么将选中所有的li,如： .demo li:nth-child(n) {background: lime;} 等于 .demo li {background: lime;} 他其实是这样计算的 n=0 －－》 没有选择元素 n=1 －－》 选择第一个li, n=2 －－》 选择第二个li, 后在的依此类推，这样下来就选中了所有的li （3-3）:nth-child() :nth-child(n)，其中n是一个简单的表达式，那么n取值是从“0”开始计算的，到什么时候结束不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用:nth-child(n),那么将选中所有的li,如： .demo li:nth-child(n) {background: lime;} 等于 .demo li {background: lime;} 请注意了，这里的“n”只能是n，不能使用其他字母代替，不然会没有任何效果的。 他其实是这样计算的 n=0 －－》 没有选择元素 n=1 －－》 选择第一个li, n=2 －－》 选择第二个li, 后在的依此类推，这样下来就选中了所有的li （3-3）:nth-child() :nth-child(2n),这中方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字，如： .demo li:nth-child(2n) {background: lime;} 等于 .demo li:nth-child(even) {background: lime;} 我们来看一下其计算的过程： n=0 －－》 2n=0 －－》 没有选中任何元素， n=1 －－》 2n=2 －－》 选择了第二个li n=2 －－》 2n＝4 －－》 选择了第四个li， 后面的依此类推 如果是“2n”这样跟我们以使用even命名class定义样式，所起到的效果是一样的，如图所示： （3-3）:nth-child() “:nth-child(2n)”也等于:nth-child(even)效果。 :nth-child(2n-1),这个选择器是在:nth-child(2n)基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择，如： .demo li:nth-child(2n-1) {background: lime;} 我们来看看其实现过程 n=0 －－》 2n-1=-1 －－》 也没有选中任何元素， n=1 －－》 2n-1=1 －－》 选择第一个li n=2 －－》 2n-1=3 －－》 选择第三个li, 后面的依此类推 其实实现这种奇数效果，我们还可以使用:nth-child(2n+1)和:nth-child(od