svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；
区别二：
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。
1.
什么是结构性伪类选择器？？
首先选择器分类分为：结构性伪类选择器和状态性伪类选择器
状态伪类选择器(动态伪类+UI元素状态伪类)：
动态伪类::因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来:如link、visited、hover、active
先来看最常见的锚点伪类，四个锚点伪类遵循爱恨原则：LoVe/HAte
.demo a:link {color:gray;}
.demo a:visited{color:yellow;}
.demo a:hover{color:green;}
.demo a:active{color:blue;}
2.
UI元素状态伪类 IE6-8不支持
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled（禁用）两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
css3新推出的：：：：：：
几个最基本的结构性伪类选择器
:root 选择器。根元素，HTML文档的根元素（or称最顶层元素），即<html>。
:not选择器。譬如想对某个结构元素内的元素使用一种样式，但是又想排除这个元素下面的某个子元素，让它不使用此样式，可以使用:not。
:empty选择器。可规定当某元素内容为空白的时候，使用其所定义的样式。
:target选择器。使用此选择器来对页面中的target元素（该元素的ID被当作超链接对象）指定样式，该样式只在用户点击了对应的超链接，并跳转到target元素后起作用。
以上是四个最基本的结构性伪类选择器
P:first-child p:last-child div:nth-child
规定属于其父元素的第二个 p 元素的每个 p：
定义和用法：
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
p:nth-of-type(2)
{
background:#ff0000;
}
可以是奇数和偶数
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
可以使用公式
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
p:nth-of-type(3n+0)
{
background:#ff0000;
}