标签：div 默认 空格 char 开头 多个 port scale round
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="refresh" content="5"/> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>css基础</title> 8 <!-- 引入css的方法 可以引入多个css文件--> 9 <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"> 10 <!-- 在style标签里面编写css样式 --> 11 <style> 12 /* 1 首先我们来弄一个绿色的背景 */ 13 body{ 14 background-color: green; 15 } 16 17 /* 2 了解css选择器*/ 18 /* 通用选择器 所有文字30px加粗*/ 19 *{ 20 font-size:30px; 21 font-weight: bold; 22 } 23 24 /* 元素选择器 */ 25 h1{ 26 color: red; 27 } 28 h2{ 29 color:blue; 30 } 31 h3{ 32 color:yellow; 33 } 34 35 36 /* 类选择器 标签上面的class属性*/ 37 .div{ 38 width: 200px; 39 height: 200px; 40 background: red; 41 } 42 /* 挨着 */ 43 .div1.div2{ 44 width: 200px; 45 height: 200px; 46 background-color:blue; 47 } 48 p.div5{ 49 color:white; 50 } 51 /* 不挨着 */ 52 .div3 .div4{ 53 width: 200px; 54 height: 200px; 55 background-color:pink; 56 } 57 p .div6{ 58 color:blue; 59 font-size: 50px; 60 } 61 62 /* ID选择器 */ 63 #app{ 64 width: 300px; 65 height: 300px; 66 background-color:yellow; 67 } 68 69 70 /* 属性选择器 */ 71 /* 简单属性选择器 有这个属性就成*/ 72 h1[class]{ 73 color:yellow; 74 } 75 /* 具体属性选择器 有这个属性还得和设置的相等*/ 76 input[type=text]{ 77 color:red; 78 } 79 80 /*3、部分属性选择器 了解即可 没有DEMO 81 82 [class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素 83 例如：class="ab"不满足[class ~="b"]，而class="a b"或class="b"满足 84 85 [class |="b"] 选择class属性值等于b或以b-开头的所有元素 86 例如：class="ab"或class="ab-"不满足[class |="a"]，而class="a"或class="a-"满足 87 88 [class ^="b"] 选择class属性值以"b"开头的所有元素 89 [class $="b"] 选择class属性值以"b"结尾的所有元素 90 [class *="b"] 选择class属性值包含"b"的所有元素*/ 91 92 /* 分组选择器 */ 93 span,em{ 94 color:red; 95 } 96 /* 后代选择器 */ 97 ul li { 98 color:white; 99 } 100 /* 兄弟选择器 */ 101 h5 + h6{ 102 color:blue; 103 } 104 /* 伪类选择器 */ 105 #pse_class:hover{ 106 color:black; 107 } 108 /* 伪元素选择器 */ 109 .after:after{ 110 content: "123"; 111 } 112 </style> 113 </head> 114 <body> 115 <!-- 1 行间样式 直接把样式写到标签里面 如果在div标签重写多个style属性,只识别第一个--> 116 <div style="width: 500px;height: 500px;border:10px solid red;" style="background-color: yellow;"> 117 行间样式DEMO 118 </div> 119 120 121 <!-- 2 选择器 --> 122 <h1>红色文字</h1> 123 <h2>蓝色文字</h2> 124 <h3>绿色文字</h3> 125 126 <div class="div">红色背景200*200</div> 127 <!-- 挨着 --> 128 <div class="div1 div2">蓝色背景200*200</div> 129 <!-- 不挨着 --> 130 <div class="div3"> 131 <div class="div4">粉色背景200*200</div> 132 </div> 133 134 <p class="div5">白色文字</p> 135 136 <p> 137 <div class="div6">绿色文字(这个很奇怪没生效我们以后解释)</div> 138 </p> 139 140 <div id="app"> 141 ID选择器 黄色背景300*300 142 </div> 143 144 <!-- 属性 --> 145 <h1 class="app"> 146 简单属性选择器 黄色文字 147 </h1> 148 149 150 <input type="text" value="红色"> 151 <input type="numnber" value="默认颜色"> 152 153 <br> 154 155 <!-- 分组 --> 156 <span>红色span</span> 157 <em>红色em</em> 158 159 <!-- 后代 --> 160 <ul> 161 <li>1</li> 162 <li>2</li> 163 <li>3</li> 164 <li>4</li> 165 </ul> 166 167 <!-- 兄弟选择器 --> 168 <h5>H5</h5> 169 <h6>H6</h6> 170 171 <!-- 伪类选择器 --> 172 <span id="pse_class">鼠标移入到此</span> 173 174 <!-- 伪元素选择器 --> 175 <div class="after"></div> 176 </body> 177 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>权重问题</title> 7 <style> 8 /* 1、内联样式 -> 1,0,0,0 style="color:red" 9 10 2、ID属性值 -> 0,1,0,0 id="app" 11 12 3、类属性值、属性选择或伪类 -> 0,0,1,0 class="app" 13 14 4、元素或伪元素 -> 0,0,0,1 <span></span> 15 16 5、结合符和通配选择器 -> 0,0,0,0 */ 17 18 .test { /*权重:0,0,1,0*/ 19 color:red; 20 } 21 #app{ /*权重:0,1,0,0*/ 22 color:blue; 23 } 24 25 /* 不进位 */ 26 .a.b.c.d.e.f.g.h.i.j.k.l{ /*权重:0,0,12,0*/ 27 width: 500px; 28 height: 500px; 29 border:1px solid red; 30 background-color: red; 31 } 32 #box{ /*权重:0,1,0,0*/ 33 background: yellow; 34 } 35 36 .important{ 37 width: 500px; 38 height: 500px; 39 border:1px solid red; 40 color:red !important; 41 } 42 43 #important{ 44 color:blue; 45 } 46 </style> 47 </head> 48 <body> 49 <span id="app" class="test"> 50 由于 0,1,0,0 > 0,0,1,0 所以显示文字为蓝色 51 </span> 52 53 54 <div class="a b c d e f g h i j k l" id="box"> 55 由于 0,1,0,0 > 0,0,12,0 所以显示文字为蓝色 56 但是.a.b.c.d.e.f.g.h.i.j.k.l 设置的其他样式 width:500px等仍然可以正常显示 57 </div> 58 59 <div class="important" id="important" style="color:green"> 60 文字颜色是红色 61 !important 权重最高 62 style 权重 1,0,0,0 63 id 权重 0,1,0,0 64 </div> 65 </body> 66 </html>
标签：div 默认 空格 char 开头 多个 port scale round
原文地址：https://www.cnblogs.com/qianduan888/p/12337535.html
