2 tygodni temu · 0ab85d7650
--- a/2_CSS/31_标签嵌套规则.html
+++ b/2_CSS/31_标签嵌套规则.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 标签嵌套规则：块级元素可以嵌套任意元素 -->
			
 
				+     <!-- p标签一般用作与段落文本相关的内容 不能嵌套块标签。 -->
			
 
				+    <p>这是一个段落元素</p>
			
 
				+    <p>
			
 
				+        <div>这是一个div元素</div>
			
 
				+    </p>
			
 
				+
			
 
				+    <ul>
			
 
				+        <li>
			
 
				+            <div>这是一个div元素</div>
			
 
				+        </li>
			
 
				+    </ul>
			
 
				+    
			
 
				+    <!-- 标签嵌套规则：行元素不允许嵌套块级元素、行块标签， 行元素内部只能放置文字 -->
			
 
				+    <!-- <span>
			
 
				+        <div>这是一个div元素</div>
			
 
				+    </span>
			
 
				+    <span>
			
 
				+        <div>这是一个div元素</div>
			
 
				+    </span> -->
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/32_选择器权重值.html
+++ b/2_CSS/32_选择器权重值.html
@@ -0,0 +1,56 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        /* css 权重值 */
			
 
				+        /* 可控范围越广选择器权重值越低 */
			
 
				+        /* “*”通配符选择器 <  标签选择器 < 类选择器 < id选择器 < 行内(内联)样式 < !important */
			
 
				+        /* 如果权重值相同 则根据选择器的顺序来确定最终样式 */
			
 
				+        #div1{
			
 
				+            color: green;
			
 
				+        }
			
 
				+        .box{
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        div{
			
 
				+            /* !important 表示该样式优先级最高 会覆盖其他样式选择器 仅能控制单行样式 */
			
 
				+            color: red !important;
			
 
				+            /* font-size: 20px; */
			
 
				+        }
			
 
				+        *{
			
 
				+            color: pink;
			
 
				+        }
			
 
				+
			
 
				+        .p2{
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        .p1{
			
 
				+            color: red;
			
 
				+        }
			
 
				+        
			
 
				+        /* .p3{
			
 
				+            color: green;
			
 
				+        } */
			
 
				+        div .p3{
			
 
				+            color: green;
			
 
				+        }
			
 
				+        .p3{
			
 
				+            color: purple;
			
 
				+        } 
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box" id="div1" style="color:yellow;">hello</div>
			
 
				+
			
 
				+    <p class="p1 p2">这是一个段落元素</p>
			
 
				+
			
 
				+
			
 
				+    <div>
			
 
				+        <p class="p3">这是一个段落元素</p>
			
 
				+    </div>
			
 
				+    <p class="p3">这是一个段落元素</p>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/33_层叠样式.html
+++ b/2_CSS/33_层叠样式.html
@@ -0,0 +1,24 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        /* css 层叠样式 如果多个选择器作用在同一个元素上 会将所有样式合并起来 如果有冲突的样式 则根据权重值来确定最终样式 */
			
 
				+        div{
			
 
				+            color: red;
			
 
				+            font-size: 50px;
			
 
				+        }
			
 
				+        .box{
			
 
				+            color: blue;
			
 
				+            font-weight: bold;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        hello
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>