关于CSS3 :nth-child() 选择器_html/css_WEB-ITnose
程序员文章站
2022-05-12 11:11:59
...
一个有很多个小方块的页面,大方块的class为big,小方块的class为small,用css3选择器这么写:
设置第偶数个小方块的margin-right为0,但是第三个小方块的margin-right却等于0了,怎么回事呢?
demo:http://guusoft.com/test/
.small:nth-child(even){margin-right:0;}
设置第偶数个小方块的margin-right为0,但是第三个小方块的margin-right却等于0了,怎么回事呢?
demo:http://guusoft.com/test/
回复讨论(解决方案)
通过其他网友的指点,明白了从父元素中选择第奇数或者偶数个子元素并不会特指某种类型(.small),而是将所有子元素都计算进去的。
所以最后的解决方法是:
$(".small:odd").addClass("last");
推荐阅读
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
关于老式浏览器兼容HTML5和CSS3的问题
-
前端笔记知识点整合之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
-
关于css3属性选择器详解
-
CSS3 :nth-child()伪类选择器 css框架safarioperaui
-
详解CSS3选择器:nth-child和:nth-of-type之运用
-
关于网页路径的疑惑_html/css_WEB-ITnose
-
html 关于ul标签的_html/css_WEB-ITnose
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
CSS3之圆角_html/css_WEB-ITnose