css常用的选择器分为三大类:基础选择器、行为伪类选择器和结构伪类选择器。
基础选择器
- id选择器:#idName{…}
特性:idName必须具备唯一性,标签原则上只能用一次。因其唯一性,所以在js和jQuery解析html DOM时常用它,获取唯一的元素节点。
常用:#unique{…} unique英文就是唯一的意思 - class选择器:.name{…}
特性:该选择器能够重用和组合使用,是css中最常用的基础选择器。 - 标签选择器: tagName{…}
特性:tag必须为标签名,同名标签自动响应(只做一次全局声明,无需在其后代标签里进行再次声明)。
常用:通常我们在body和body的后代选择器写一些全局样式。但是之后我 们可以在其后代添加其特有的样式去替换该全局样式。实际上是一种对样式的封装。
/*作用于body全局*/
body,body *{
margin:0;
padding:0;
box-sizing:border-box;
font:14px/1.2 arial,"Microsoft Yahei";
}
/*body所有的样式均作用于pole-single所在的标签中*/
.pole-single{
width:25%;
background-color:purple;
text-align:center;
padding-top:5px;
color:#fefefe;
/*字体大小为12px,会覆盖body里定义的全局字体大小:14px*/
font-size:12px;
}
- 并集选择器(不同选择器,样式相同)
格式:选择器,选择器{…} (3个以上使用“~”,当然原则上尽量不允许3个以上,3个以上要求要进行封装,这里和java的形参数量封装入类似)
例如:
/*作用于time和sep所在的标签*/
.time,.sep{…}
- 子代和后代选择器:
选择器>子标签名→子代选择器
选择器(空格)子标签名→后代选择器 空格一定要用 - 选择器:nth-child(an+b)选择器
* 简单数字序号写法: nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
* 倍数写法: nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,
它是倍数写法的标志,如3n、5n。
* 倍数分组匹配: nth-child(an+b) 与 :nth-child(an-b)
先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+
不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。
如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实
an前面也可以是负号,但留给下一部分讲。)
/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+1){background:orange;}
/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(5n-1){background:orange;}
* 反向倍数分组匹配: nth-child(-an+b)
/*匹配第8、第5和第2个LI*/
li:nth-child(-3n+8){background:orange;}
/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来
限定前面N个匹配常会用到*/
li:nth-child(-1n+8){background:orange;}
* 奇偶匹配: nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。
行为伪类选择器
- 悬浮伪类:选择器:hover{…} 鼠标进入执行伪类,离开放弃伪类
- 点击伪类:选择器:active{…} 鼠标左键单击执行伪类,松开放弃伪类
结构伪类
- 前置伪类: selector::before{…}
- 后置伪类: selector::after{…}
综合
/*selector(除第一个子类)的所有子类的前置伪类*/
selector >:not(:first-child)::before{…}
/*selector行为伪类hover的前置元素伪类*/
selector:hover:before{…}
/*进入父选择器区域:子代选择器发生伪类作用*/
选择器:hover>子代选择器