HTML5的新特性？伪类和伪元素？

记录一下HTML5的新特性、移除元素。还有经常容易搞混的CSS伪元素和伪类。

H5新特性

选择器 .querySelector() .querySelectorAll()
拖拽释放  drag and drop
媒体播放 audio and vidio
本地存储 localStorage sessionStorage
离线应用 manifest
桌面通知 Notifications
语义化标签 article footer header nav section
增强表单控件 calendar date time email url search
地理位置 geolocation
多任务 webworker
全双工通信协议    websocket
历史管理 history
跨域资源共享 CORS Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
跨窗口通信 PostMessage
FormData对象 
绘画 canvas

H5移除的元素
表现的元素：basefont、big、center、font、s、strike、tt、u.
可用性低元素：frame、frameset、noframes.

伪类&伪元素

伪类 pseudo-classes 用于已有元素处于某种状态时为其添加对应样式。伪类名称不区分大小写，单冒号前面和后面不能有空格。

① 比如 a链接的不同状态，未点击过、已点过、聚焦等等。

a链接的不同状态， 有效的顺序是：link visited hover focus active 。

② 比如元素所在位置状态，属于第一个、最后一个、不包含某个等等.

③ 比如表单的状态，选中、禁用等等。

p:first-child 父元素的第一个子元素

p:first-child { color: blue; } P标签集合中第一个p标签字体蓝色。

p > i:first-child { color: blue; } 所有P标签里的第一个I标签字体颜色蓝色。

p:last-child 最后一个子元素

q:lang(no) {quotes: "" "";} :lang 伪类 为语言属性值为 no 的q元素定义引号类型。

p:empty 没有子元素的p元素

p:first-of-type 选择所有 p元素是其父元素的第一个p元素

p:last-of-type 选择每个p元素是其母元素的最后一个p元素

div:not(.one) 选择所有不包含类名one的 div 标签

:is(.one，.two) p{} 选择类one、two下P元素

input:checked 所有选中的表单元素

input:disabled 所有禁用的表单

input:in-range 定义input 根据max和min属性范围内的样式

input:invalid 所有无效的元素

input:enabled 所有启用的表单元素

input:optional 选择没有 “required”的input元素

input:out-of-range 选择指定范围以外的值的元素属性

input:read-only 选择只读属性的元素属性

input:read-write 选择没有只读属性的元素属性

input:required 选择有"required"属性指定的元素属性

input:valid 选择所有有效值的属性

p:nth-child(2) 选择所有p元素的父元素内第二个子元素是P的元素（第二个不是P元素，则无法选中）

p:nth-last-child(3) 选择所有p元素的父元素内倒数第二个子元素是P的元素（倒数第二个不是P元素，则无法选中）

p:only-child 选择所有仅有一个子元素的p元素（如果有其他元素，则无法选中）

p:nth-of-type(2) 选择每个p元素是其母元素内第2个p元素（忽略其他元素）

p:nth-last-of-type(2) 选择每个p元素是其母元素内倒数第2个p元素（忽略其他元素）

p:only-of-type 选择所有仅有一个子元素为p的元素 (忽略其他元素)

#news:target 选择当前活动#news元素(点击URL包含锚的名字)

伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

伪元素一般以两个冒号表示：

p::first-letter 选择每个

元素的第一个字母

p::first-line 选择每个

元素的第一行

p::before 在每个

元素之前插入内容

p::after 在每个

元素之后插入内容

未完待续。