标签:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS选择器测试</title> 6 <style type="text/css"> 7 /* 1.元素选择器为当前网页文件中所有指定的元素设置样式 */ 8 p { 9 color: red; 10 } 11 12 /* 13 2.id选择器,让元素通过选择指定id,来使用指定的样式. 14 通过# id名的方式来声明样式 15 */ 16 17 #p1 { 18 font-size: 20px; 19 } 20 21 /* 3.类选择器 通过.class方式类声明一个样式. 22 p2代表的是一个class名 23 */ 24 .p2 { 25 background-color: black; 26 } 27 28 29 /*css分组: 30 1.选择器分组: 把多个选择器分成一组,添加一些样式,引用了这些被分组的选择器的元素都会应用这些新定义的样式. 31 2.元素分组: 为指定的元素分组. 32 */ 33 34 /*选择器分组:为多个选择器添加一个相同的样式设置,使用这些选择器的元素,都会应用这些样式.*/ 35 #p1,.p2 { 36 border: 10px red solid; 37 } 38 /*元素分组:为指定的元素分组.*/ 39 h1,p { 40 border: 10px red solid; 41 } 42 43 </style> 44 </head> 45 <body> 46 <h1>h1测试</h1> 47 <p>123</p> 48 <p id="p1">测试id选择器</p> 49 <p class="p2">测试class选择器</p> 50 </body> 51 </html>
标签:
原文地址:http://www.cnblogs.com/aL0n4k/p/4847656.html