a标签 必须按顺序写
link 链接未访问的时候的样式
visited 链接访问后的样式
hover 鼠标放上去的样式
active 链接在访问时的样式
after
before
nth-of-type(2n) 选择属于其父级下面第n个元素
隔行换色：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p:nth-of-type(2n){ 8 background: red; 9 } 10 p:nth-of-type(2n-1){ 11 background-color: gold; 12 } 13 </style> 14 </head> 15 <body> 16 <p>1</p> 17 <p>2</p> 18 <p>3</p> 19 <p>4</p> 20 <p>5</p> 21 <p>6</p> 22 </body> 23 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 980px; 9 margin: 0 auto; 10 overflow: auto; 11 } 12 span{ 13 float: left; 14 width: 300px; 15 height: 300px; 16 background-color: red; 17 margin:10px ; 18 } 19 span:nth-of-type(3n-1){ 20 margin-left: 10px; 21 margin-right: 10px; 22 } 23 </style> 24 </head> 25 <body> 26 <div> 27 <span>1</span> 28 <span>2</span> 29 <span>3</span> 30 <span>4</span> 31 <span>5</span> 32 <span>6</span> 33 <span>7</span> 34 <span>8</span> 35 <span>9</span> 36 <span>10</span> 37 <span>11</span> 38 <span>12</span> 39 </div> 40 </body> 41 </html>
变换transform
translateX 位移
translateY 位移
rotate 旋转
scale 缩放
skewX 斜切
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 height: 300px; 9 width: 980px; 10 border: 1px solid red; 11 } 12 span{ 13 width: 200px; 14 height: 200px; 15 background-color: yellow; 16 border: 1px solid red; 17 float: left; 18 transition: 1s; 19 } 20 span:hover{ 21 /*transform: translateX(100px) rotate(45deg);*/ 22 /*transform:scale(1.3);*/ 23 transform: skewX(45deg); 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 <span></span> 30 </div> 31 </body> 32 </html>