HTML_css选择器

第二种增加css样式的方法，可以在head中增加style标签，style中通过选择器定位标签增加css样式

CSS选择器分为六种：

1、id选择器

2、class选择器

3、标签选择器

4、层级选择器（空格）

5、组合选择器（逗号）

6、属性选择器（中括号）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*id选择器*/
10         #i1{
11             background-color: #0000CC;
12             width: 100px;
13             height: 50px;
14         }
15 
16 
17     </style>
18 </head>
19 <body>
20 
21 <div id="i1">id选择器</div>
22 
23 </body>
24 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*class选择器*/
10         .c1{
11             background-color: red;
12             width: 100px;
13             height: 50px;
14         }
15 
16         /*为什么有id和class两种选择器？*/
17         /*id在html页面中，只允许出现1个同名id；但是class是可以重复的；*/
18         /*实际前端开发中，主要用class进行定位的，因为多个标签可以同时引用一个css样式*/
19 
20 
21     </style>
22 </head>
23 <body>
24 
25 <div class="c1">class选择器</div>
26 
27 </body>
28 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*标签选择器*/
10         /*表示 这个页面下所有的div标签，都增加这个样式*/
11         div{
12             background-color: pink;
13             width: 100px;
14             height: 100px;
15         }
16 
17 
18     </style>
19 </head>
20 <body>
21 
22 <div></div>  /*标签选择器*/
23 
24 </body>
25 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*层级选择器*/
10         /*表示div标签下的span标签使用这个样式*/
11         div span{
12             background-color: pink;
13             width: 100px;
14             height: 100px;
15         }
16 
17 
18     </style>
19 </head>
20 <body>
21 
22 <div>
23     <span>层级选择器</span>
24 </div>
25 
26 </body>
27 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*id组合选择器 id i1 i2 i3 共用一套css样式*/
10         #i1, #i2, #i3 {
11             background-color: #0000CC;
12             width: 100px;
13             height: 100px;
14         }
15 
16 
17         /* 组合选择器 class s1 s2 s3 共用一套css样式*/
18         .s1,.s2,.s3{
19 
20         background-color: darkmagenta;
21 
22         height:48px;
23 
24         }
25 
26 
27         /*最常用：class层级选择器*/
28         .c2 span{
29             background-color:blue;
30             width: 100px;
31             height: 100px;
32         }
33 
34 
35 
36     </style>
37 </head>
38 <body>
39 
40     <!--id组合选择器-->
41     <div id="i1"></div><br>
42     <div id="i2"></div><br>
43     <div id="i3"></div>
44 
45 
46     <!-- class组合选择器 -->
47     <div class="s1"></div>
48     <div class="s2"></div>
49     <div class="s3"></div>
50 
51     <!--class选择器-->
52     <div class="c2">
53         <span>123</span>
54     </div><br>
55     <div class="c2">
56         <span>456</span>
57     </div><br>
58     <div class="c2">
59         <span>789</span>
60     </div>
61 
62 </body>
63 </html>

猜你喜欢