码迷,mamicode.com
首页 > Web开发 > 详细

css选择器

时间:2015-09-30 00:54:25      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 

css选择器

标签:

原文地址:http://www.cnblogs.com/aL0n4k/p/4847656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!