08.CSS3选择器、边框、背景、按钮

CSS3概述

CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷   动画  圆角  阴影  边框图片 …

CSS3现状

1、浏览器支持程度差，需要添加私有前缀

-webkit-  谷歌 safari

-moz-   火狐

-ms-     IE

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

CSS3选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容

CSS3属性选择器

[attribute]		[target]	选择所有带有target属性元素	2
[attribute=value]		[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]		[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute|=language]		[lang|=en]	选择 lang 属性以 en- 为开头的所有元素（注意有关个-）
[attribute^=value]		a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]		a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]		a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素

CSS3伪类选择器

:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	指定只有选择每个p元素是其父级的最后一个子级。
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式

CSS3伪元素选择器

是一个行内元素，需要转换成块:display:block   float:**  position:。

必须添加content,哪怕不设置内容，也需要content:””。

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

::first-letter	p::first-letter	选择每一个<P>元素的第一个字母或者第一个汉字	1
::first-line	p::first-line	选择每一个<P>元素的第一行	1