第二种增加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>HTML_css选择器
原文地址：https://www.cnblogs.com/testfan/p/8955400.html