CSS3选择器

Posted 2020-07-11

相比css2，c3里新增了许多选择器，为控制页面元素带来了许多便利。

属性选择器：

E[ attr="val"] 选择具有attr属性且属性值等于val的E元素;

伪类选择器：

伪类选择器是我觉得应用非常广泛的选择器；

E:first-child第一个子元素

E:last-child最后一个子元素

个人觉得在做tab菜单的时候，这两个选择器及其有用；

E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；

nth的意思是第n个元素，英语里第几个的后缀为th, 故这里取th;

E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；

这个选择器相当的好使，使得css轻易可以定位到页面的某个元素或者某几个元素，比如要选取所有的基数元素，nth-child里可以取(2n+1);

选取前5个元素，nth-child可以取(-n+5);

注意，当-n+5的结果小于0时，是没有效果的，n的值从0开始取，所以可以取到1，2，3，4，5这五个元素；一个应用这个选择器的案例：

日历效果：

利用css3的选择器，我们可以轻轻松松完成这个例子，比如我们想让所有的星期六和星期天都变暗:

.calendar dl dd:nth-child(-n+6) span:nth-child(6n){
   color: #D63230;
}

.calendar dl dd:nth-child(-n+6) span:nth-child(7n){
   color: #D63230;
}

这个时候可以用nth-child(6n)和nth-child(7n)来进行选择；这样就灵活许多，也减轻了代码的长度；