选择器

a

| :link | a:link | 选择所有未被访问的链接。
| a:visited | 选择所有已被访问的链接。
| :active | a:active | 选择活动链接。
| :hover | a:hover | 选择鼠标指针位于其上的链接。
| :focus | input:focus | 选择获得焦点的 input 元素。 |

| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
都是父元素下面的某个位置xxx元素的样式。
:nth-of-type(n) 父元素下的第n个元素，
:nth-child(n)父元素下的第n个xxx元素

动画

animation
语法 ：animation: name duration timing-function delay iteration-count direction;
@keyframes

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

transform

image.png

image.png

div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;

}

div:hover
{
width:300px;
}