07 三种基础选择器的应用场景和区别（代码06） 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*所有的css代码都写到这里*/
 8             /*选择器{
 9                 这里面写具体都规则
10             }*/
11             /*
12              * 选择器的作用：查找到对应的html元素
13              * #  id选择器
14              * .  类选择器
15              * div  标签选择器
16              * 
17              * 不管用什么选择器，最终目的都是为了找到对应的元素 最终用{}里面的规则去修饰
18              */
19             /*
20              * id、类、标签这几个选择器的不同点？
21              * 
22              * id: id的名称不会出现多次， 表示唯一，如果说网页中有一个唯一的元素需要修饰 用id选择器
23              * 类：类名称可以出现多次 修饰同一类元素，有多个元素具有同样的样式的时候，可以用类选择器
24              * 标签： 通过标签名称，可以选中所有同名的标签
25              */
26             .div{
27                 /*设置宽度*/
28                 width: 100px;
29                 /*设置高度*/
30                 height: 100px;
31                 /*设置背景*/
32                 background-color: blue;
33             }
34             .red{
35                 color: red;
36             }
37             p{
38                 color: green;
39             }
40         </style>
41     </head>
42     <body>
43         <div ></div>
44         <!--div、p、h1 这三个元素字体都是红色-->
45         <div class="red">这是div</div>
46         <p class="red">这是p元素</p>
47         <h1 class="red">这是h1</h1>
48         
49         <p>sdfs</p>
50         <p>sdfsdf</p>
51     </body>
52 </html>

 

posted @ 2019-09-02 09:10  慕少溪梓  阅读(423)  评论(0)    收藏  举报