黑马学习选择器练习
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性选择器一</title> 6 <style> 7 /*字符串包含*/ 8 [class*="logo"]{ 9 color: purple; 10 } 11 /*值列表包含*/ 12 [class~="logo"]{ 13 color: pink; 14 } 15 </style> 16 </head> 17 <body> 18 <p class="csdn_logo">csdn_logo</p> 19 <p class="csdn logo big">csdn logo big</p> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性选择器2</title> 6 <style> 7 p[id="csdn"]{ 8 color: orange; 9 } 10 /*p[id*="csdn"]{*/ 11 /*color: grey;*/ 12 /*}*/ 13 /*p[id$="csdn"]{*/ 14 /*color:goldenrod;*/ 15 /*}*/ 16 /*p[id^="csdn"]{*/ 17 /*color: blueviolet;*/ 18 /*}*/ 19 p[id]{ 20 color: green; 21 } 22 p{ 23 color: brown; 24 } 25 </style> 26 </head> 27 <body> 28 <p id="csdn">csdn</p> 29 <p id="xxcsdn">xxcsdn</p> 30 <p id="csdnxx">csdnxx</p> 31 <p id="xxcsdnxx">xxcsdnxx</p> 32 <p>文本</p> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选择器优先级测试</title> 6 7 <link rel="stylesheet" href="css/purple.css"> 8 <link rel="stylesheet" href="css/pink.css"> 9 <style> 10 /* 11 计算选择器优先级(a-b-c) 12 a: id选择器个数 13 b: 类选择器，属性选择器，伪类选择器个数 14 c: 元素选择器，伪元素个数 15 #text 100 16 [id="text"][class="green"] 20 17 [class="green"] 10 18 .green 10 19 p 1 20 #text > [id="text"][class="green"] > [class="green"] = .green > p 21 同级别选择器：后面的覆盖前面的，css文件的位置按照link标签的位置算。 22 */ 23 #text{ 24 color: blue; 25 } 26 [id="text"][class="green"]{ 27 color: goldenrod; 28 } 29 [class="green"]{ 30 color: goldenrod; 31 } 32 .green{ 33 color: green; 34 } 35 /*!*同级选择器后面覆盖前面的*!*/ 36 p{ 37 color: pink; 38 } 39 p{ 40 color: purple; 41 } 42 </style> 43 </head> 44 <body> 45 <p> 46 文本 47 </p> 48 <p class="green"> 49 文本 50 </p> 51 <p id="text" class="green"> 52 文本 53 </p> 54 </body> 55 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>隔行换色</title> 6 <style> 7 table{ 8 width: 400px; 9 /*设置是否合并表格边框和单元格边框*/ 10 /*border-collapse: collapse;*/ 11 /*设置单元格间距*/ 12 border-spacing: 20px; 13 border: 5px solid black; 14 } 15 td{ 16 border: 5px solid black; 17 } 18 19 /* 20 nth-of-type(an + b),子元素的索引从1开始，n>=0 21 */ 22 /*table tr:nth-of-type(2n + 1) {*/ 23 /*background-color: #ffc0cb;*/ 24 /*}*/ 25 table tr:nth-of-type(odd) { 26 background-color: #ffc0cb; 27 } 28 29 /*table tr:nth-of-type(2n) {*/ 30 /*background-color: #ffdead;*/ 31 /*}*/ 32 table tr:nth-of-type(even) { 33 background-color: #ffdead; 34 } 35 </style> 36 </head> 37 <body> 38 <table> 39 <tr> 40 <td>1</td> 41 <td>阿里</td> 42 <td>淘宝、天猫</td> 43 </tr> 44 <tr> 45 <td>2</td> 46 <td>腾讯</td> 47 <td>QQ、微信</td> 48 </tr> 49 <tr> 50 <td>3</td> 51 <td>百度</td> 52 <td>百度地图、爱奇艺</td> 53 </tr> 54 <tr> 55 <td>4</td> 56 <td>网易</td> 57 <td>网易云音乐</td> 58 </tr> 59 </table> 60 </body> 61 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a:link{ 8 color: #000; 9 } 10 a:visited{ 11 color: brown; 12 } 13 /*hover和focus的位置可调，其他的顺序一般这样*/ 14 a:focus{ 15 color: pink; 16 } 17 a:hover{ 18 color: goldenrod; 19 } 20 a:active{ 21 color: blueviolet; 22 } 23 </style> 24 </head> 25 <body> 26 <a href="#" tabindex="1">百度</a> 27 </body> 28 </html>
