CSS选择器

通配符选择器

			* {
				color: pink;
			}

链接伪类选择器

/*伪类选择器，向选择器添加特殊效果
 伪类选择器中的链接选择器，主要针对标签a（链接）*/
			a:link {     /*未访问的链接*/
				font-size: 16px;
				color:royalblue;
				font-weight: 700;
			}
			
			a:visited {    /*已访问的链接，已点击过的状态*/
				font-size: 16px;
				color:black;
				font-weight: 700;
			}
			
			a:hover {      /*鼠标移动到链接上*/
				font-size: 16px;
				color: red;
				font-weight: 700;
			}
			
			a:active {     /*选定的链接,就是按住不方*/
				font-size: 16px;
				color: peru;
				font-weight: 700;
			}

结构选择器

			li:first-child {   /*选择第一个孩子*/
				color: pink;
			}
			
			li:last-child {    /*选择最后一个孩子*/
				color: red;
			}
			
			li:nth-child(5){   /*选择第5个孩子*/
				color: skyblue;
			}
			
			li:nth-child(odd){   /*可以选择奇数的孩子*/
				color: firebrick;
			}	
					
			li:nth-child(even){   /*可以选择偶数的孩子*/
				color:pink;
			}
			
			  li:nth-child(n){   /*可以选择所有的孩子(n从0开始数起)*/
				color: seagreen;
			}
			
			li:nth-child(2n){    /*可以选择偶数的孩子*/
				color: seagreen;
			}
			
			li:nth-child(2n-1){   /*可以选择奇数的孩子*/
				color: seagreen;
			}	
			
			li:nth-child(even){   /*从第一个孩子开始数偶数*/
				color: pink;
			}
			
			li:nth-last-child(even){    /*nth-last-child是从最后一个孩子开始数*/
				color: skyblue;
			}

目标伪类选择器

/*目标伪类选择器target,选择当前活动的目标元素*/
			:target{
				color: red;
				font-size: 30px;
			}

交集选择器

p.l {
				color: pink;    /*交集选择器:既属于p标签也叫做l*/
			}

并集选择器

/*并集选择器使用逗号来隔开*/
/*span,.h13  这种使用class的命名时,在逗号后面继续添加句号(和平时写的一样)*/
			div,
			p,
			span,
			.h13 {
				color: blue;
				font-size: 20px;
			}

后代选择器

div p {
				color: pink;    /*div是p的父级*/
			}

子元素选择器

.nav li {
				color: pink;   /*空格表示后代选择器,可以选择儿子 孙子 重孙子..... */  
			}
			
.nav > li {
				color: skyblue;   /*大于号是   子元素选择器,只能选择亲儿子*/
			}

属性选择器

/*属性选择器:选取标签带有某些属性的*/
			a[title] {     /*属性选择器用中括号来表示*/
				color: darkolivegreen;
			}
			
			input[type=text] {  /* 把type的值为text的  选出来.*/
				color: pink;    /*=(等号)表示完全相等*/
			}
			
			input[type=submit] {
				color: skyblue;
			}
			
			div[class^=font] {     /*class^=font表示以font开头*/
				color: rosybrown; 
			}
			
			div[class$=footer] {      /*class$=footer表示以footer结尾*/
				color: darkcyan;
			}
			
			div[class*=tao] {    /* class*=tao 表示tao在任何位置*/
				color: brown;
			}

伪元素选择器（CSS3）

p::first-letter {     /*first-letter选择第一个字*/
				color: red;
				font-size: 30px;
			}
			
/*first-line不是以标点符号来划分行的,是以页面显示出来的行来显示*/
p::first-line {     /*first-line选择第一行字*/
				color: deepskyblue;
				font-size: 20px;
			}
			
/*当在网页上选中相应字时,可以变化的样式*/
p::selection {
				color: pink;
			}
			
/*before和after在盒子内部的前面或后面插入内容*/
div::before {   /* 表示在....之前插入内容*/
				content: "本特利";    /*必须要有content,否则不起作用*/
			}
			
div::after {     /* 表示在....之后插入内容*/
				content: "会说话啦*……*";    /*必须要有content*/
			}