CSS3（新增选择器，nth选择器，伪元素）

1.CSS3选择器

1.1新增基础选择器

1.1.1 子元素选择器（>）

	div>p{
	color:#f00;
	}

之有子级的生效，更下级后代没效果。

1.1.2 相邻元素选择器（+）

	div+p{
	color:#f00;
	}

只有在同一个父元素中，只有元素下面第一个元素有效果。（相邻且向下）

1.1.3通用兄弟选择器（~）

	div~p{
	color:#f00;
	}

只有在同一个父元素中，只有元素下面元素素有效果。（向下）

1.1.4群组选择器（，）

	div,p,a,.pap{
	color:#f00;
	}

写到谁谁生效

1.2属性选择器

1.2.1 标签名[标签属性]

	a[href]{
	color:#f00;
	}

a 标签有href属性生效

1.2.2 标签名[标签属性=“值”]

	a[href="#"]{
	color:#f00;
	}

a 标签有href属性且值是#生效

1.2.3 标签名[标签属性~=“值”] （用于多值，包含所写的值有效）

	a[class="#"]{
	color:#f00;
	}

用于多值，包含所写的值有效

1.2.4 标签名[标签属性^ =“值”] （开头包含，多值默认采取第一个）

	a[clas^s="#"]{
	color:#f00;
	}

开头包含#，多值默认采取第一个

1.2.4 标签名[标签属性$ =“值”] （结尾包含，多值默认采取最后一个）

	a[class$="#"]{
	color:#f00;
	}

结尾包含#，多值默认采取最后一个

1.2.4 标签名[标签属性* =“值”] （全部包含）

	a[class*="#"]{
	color:#f00;
	}

只要包含#，就改样式

1.2.4 标签名[标签属性*|=“值”] （值，值-）

	a[class|="#"]{
	color:#f00;
	}

#和以#-开头的，改样式

1.3伪类选择器

1.3.1动态伪类

1.3.1.1 锚点伪类

:link 未访问的链接
:visitrd 已访问的链接

1.3.1.2用户行为伪类

:hover 当有鼠标悬停在链接上
:active 被选择的链接(鼠标点击不松手样式)
:focus 输入框等获取光标

1.3.2UI元素状态伪类

:disabled 输入框禁用
:enabled 输入框未禁用
:checked 单选复选选中

1.3.3CSS3结构类（nth选择器）

1.3.3.1 :first-child(父元素里第一个元素)

	a:first-child{
	color:#f00;
	}

a标签父元素里的第一个元素

1.3.3.2 :last-child(父元素里最后一个元素)

	a:last-child{
	color:#f00;
	}

a标签父元素里最后一个元素

1.3.3.3 :nth-child(n){}(父元素里第n个元素)

n是常数 ，也可以直接写数值。

注意会把单标签和样式标签算入。

值：2n和even 偶数

值：2n+1和2n-1和odd 奇数

	a:nth-child(n){
	color:#f00;
	}

a标签父元素里第n个元素

1.3.3.4 :nth-last-child(n){}(父元素里倒数第n个元素)

	a:nth-last-child(n){
	color:#f00;
	}

a标签父元素里倒数第n个元素

1.3.3.5 :nth-of-type(n){}(父元素里特定第n个元素)

	a:th-of-type(n){
	color:#f00;
	}

a标签父元素里第n个特定元素

1.3.3.6 :nth-last-of-type(n){}(父元素里倒数特定第n个元素)

	a:th-last-of-type(n){
	color:#f00;
	}

a标签父元素里倒数第n个特定元素

1.3.3.7 :first-of-type(父元素里特定第一个元素)

	a:first-of-type{
	color:#f00;
	}

a标签父元素里第一个特定元素

1.3.3.8 :last-of-type(父元素里特定最后一个元素)

	a:first-of-type{
	color:#f00;
	}

a标签父元素里最后一个特定元素

1.3.3.9 :only-child(父元素唯一个子元素，元素必须是特定元素)

	a:only-child{
	color:#f00;
	}

父元素里只有一个标签，且标签还是a标签

1.3.3.10 :only-of-child(父元素唯一个特定元素)

	a:only-of-child{
	color:#f00;
	}

父元素里可以有多个标签，a标签只能有一个才能实现

1.3.3.11 :empty(匹配父元素里没有任何内容的标签)

	div:empty{
	}

匹配父元素里所有没有内容和下级标签的div标签

1.3.4否定选择器（:not）

父元素:not(子元素/子元素选择器)

	div:not(:nth-child(3)){
	}

元素里第3个实现效果

1.3.5伪元素

伪元素不在html显示，正通过开发者模式查看到伪元素的名字

1.3.5.1 ::first-line(控制第一行文字)

	div::first-line{
	colo:#f00;
	}

控制第一行文字,不适合行内元素。（行内元素默认位子是一行）

1.3.5.2 ::first-letter(控制第一个文字)

	div::first-letter{
	colo:#f00;
	}

控制第一个文字

1.3.5.3 ::before(在元素内容前插入新的内容)

	div::before{	
		content："我在内容的前面";
	}

在元素内容前插入新的内容

1.3.5.4 ::after(在元素内容后插入新的内容)

	div::after{	
		content："我在内容的后面";
	}

在元素内容后插入新的内容

1.3.5.4 ::selection(浏览器中选中文本的背景与前景颜色)

	div::selection{	
		content："我在内容的后面";
	}

浏览器中选中文本的背景与前景颜色