前端 CSS3 知识总结

一、结构为类选择器

第一类：
	:first-child		选择父元素的第一个子元素
	:last-child			选择父元素的最后一个子元素
	:nth-child(n)		选择父元素下的第n个元素或奇偶元素，n的值为“数字 |odd| even”											
	:only-child			选择父元素中唯一的子元素（该父元素只有一个子元素）
	
第二类：
	E:first-of-type		选择同元素类型的第1个同级兄弟元素
	E:last-of-type		选择同元素类型的最后1个同级兄弟元素
	E:nth-of-type（n）	匹配同元素类型的第n个同级兄弟元素，n的值为“数字 |odd| even” 	 	
	E:only-of-type		匹配父元素中特定类型的唯一子元素（该父元素可以有多个子元素）
										
第三类：
	E:root			选择文档的根元素。在HTML中，根元素永远是HTML
	E:not()			选择某个元素之外的所有元素
	E:empty			选择一个不包含任何子元素或内容的元素
	E:target		选取页面中的某个target元素

二、UI元素状态伪类选择器

E:focus			指定元素获得光标焦点时使用的样式
E:checked		选择E元素中所有被选中的元素
E::selection	改变E元素中被选择的网页文本的显示效果
E:enabled		选择E元素中所有“可用”元素
E:disabled		选择E元素中所有“不可用”元素
E:read-write	选择E元素中所有“可读写”元素
E:read-only		选择E元素中所有“只读”元素
E::before		在E元素之前插入内容
E::after		在E元素之后插入内容

三、文字

text-shadow		文字阴影
text-stroke		文字描边
text-overflow	文本溢出处理
word-wrap		长单词或URL强制换行
@font-face		嵌入服务器字体
font-size-adjust调整字体尺寸

1、text-shadow属性

	在CSS3中，我们可以使用text-shadow属性来实现文字的阴影效果。

	语法：text-shadow:x-offset  y-offset  blur  color;

	说明：

	x-offset：（水平阴影）表示阴影的水平偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；
	y-offset：（垂直阴影）表示阴影的垂直偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；
	blur：（模糊距离）表示阴影的模糊程度，单位可以是px、em或者百分比等。blur值不能为负。如果值越大，则阴影越模糊；如果值越小，则阴影越清晰。当然，如果不需要阴影模糊效果，可以吧blur值设置为0；
	color：（阴影的颜色）表示阴影的颜色，可以使用绿叶学习网的“在线调色板”获取。

2、text-stroke属性

	在CSS3中，我们可以使用text-stroke属性为文字添加描边效果。这个描边效果，说白了就是给文字	 添加边框，注意喔，“文字”