diff --git "a/\347\216\213\351\235\226\350\214\271/20241011--CSS\351\200\211\346\213\251\345\231\250\344\274\252\347\261\273.md" "b/\347\216\213\351\235\226\350\214\271/20241011--CSS\351\200\211\346\213\251\345\231\250\344\274\252\347\261\273.md"
index c7e368481e6c9ab885d653f4b7982c043fd7cd9b..6439d565aca9d28e161982d11e4d7a4138868834 100644
--- "a/\347\216\213\351\235\226\350\214\271/20241011--CSS\351\200\211\346\213\251\345\231\250\344\274\252\347\261\273.md"
+++ "b/\347\216\213\351\235\226\350\214\271/20241011--CSS\351\200\211\346\213\251\345\231\250\344\274\252\347\261\273.md"
@@ -74,3 +74,112 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
- `:hover` “悬停”：鼠标放到标签上的时候
- `:active` “激活”： 鼠标点击标签，但是不松手时。
- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+
+
+举例1：
+
+```html
+
+```
+效果：
+
+
+
+利用这个`hover`属性，我们同样对表格做一个样式的设置：
+表格举例：
+
+```html
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+
+
+
+
+```
+
+效果：
+
+
\ No newline at end of file
diff --git "a/\347\216\213\351\235\226\350\214\271/20241012--CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md" "b/\347\216\213\351\235\226\350\214\271/20241012--CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..39fecc0fe4830d1f7774dd7602237b885ae2e101
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/20241012--CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md"
@@ -0,0 +1,269 @@
+ ## CSS样式表的继承性
+ 看下图代码，来引入继承性：
+ 
+
+ 上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签``也增加了红色属性。于是我们得到这样的结论：
+
+> 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是 **继承性。**
+继承性是从自己开始，直到最小的元素。
+
+当再给上方代码加一条属性：
+
+
+我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。
+
+得出结论：
+
+- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
+
+- 关于盒子、定位、布局的属性，都不能继承。
+
+ ## CSS样式表的层叠性
+ ### 层叠性：计算权重
+
+**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
+
+
+
+三种选择器同时给p标签增加颜色的属性，但最终文字显示的是蓝色，则出现叠层性的情况。
+
+当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
+
+- id 选择器
+- 类选择器、属性选择器、伪类选择器
+- 标签选择器、伪元素选择器
+
+因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
+
+### 层叠性举例
+
+#### 举例1：计算权重
+
+
+文字最终为红色
+
+得出结论：统计各个选择器的数量，优先级高的胜出。
+
+PS：不进位，实际上能进位（知识点：255个标签，等于一个类名）但是没有实际意义！！！！！
+
+#### 举例2：权重相同时
+
+
+得出结论：权重相同时，就近原则。
+
+#### 举例3：具有实战性的例子
+
+### css两个性质
+现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
+
+如果写成下面这种代码是无法实现的：
+
+
+
+无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
+
+正确的做法是：（**非常重要**）
+
+
+
+上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。**
+
+这种方式好用是好用，但用好很难。
+
+就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。**
+
+上面这个例子很具有实战性。
+
+#### 举例4：继承性造成的影响
+
+这里需要声明一点：
+
+ >如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
+
+为了验证上面这句话，我们来看看下面这样的例子：
+
+
+
+另外：**如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的**。举例如下：(box3 描述得最近，所以采用 box3 的属性)
+
+
+
+上方代码的文字版如下：
+
+```html
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+```
+
+### 层叠性：权重计算的问题大总结（非常重要）
+
+层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
+
+通过列举上面几个例子，我们对权重问题做一个总结。
+
+
+
+上面这个图非常重要，我们针对这个图做一个文字描述：
+
+- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
+- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
+
+### CSS样式表的冲突的总结
+
+- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
+- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
+- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
+
+> 总结：就近原则。ID选择器优先级最大。
+
+举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
+
+
+
+另外还有两个冲突的情况：
+
+- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
+- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。
+
+例如：
+
+
+
+## 权重问题深入
+
+### 同一个标签，携带了多个类名，有冲突：
+
+这里需要补充两种冲突的情况：
+
+- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：**定义**的样式表中，谁最近，就用谁。
+- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
+
+例如：（就近原则）
+
+
+
+上图中，**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关，只和css的顺序有关。
+
+### !important标记：优先级最高
+
+来看个很简单的例子：
+
+
+
+上图中，显然id选择器的权重最大，所以文字的颜色是红色。
+
+如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下：
+
+
+
+important是英语里面的“重要的”的意思。我们可以通过如下语法：
+
+```
+k:v !important;
+```
+
+来给一个属性提高权重。这个属性的权重就是**无穷大**。
+
+注意，一定要注意语法的正确性。
+
+正确的语法：
+
+```
+font-size:60px !important;
+```
+
+错误的语法：
+
+```
+font-size:60px; !important; 不能把!important写在外面
+font-size:60px important; 不能忘记感叹号
+```
+
+`!important`标记需要强调如下3点：
+
+**（1）!important提升的是一个属性，而不是一个选择器**
+
+```css
+ p{
+ color:red !important; 只写了这一个!important，所以只有字体颜色属性提升了权重
+ font-size: 100px ; 这条属性没有写!important，所以没有提升权重
+ }
+ #para1{
+ color:blue;
+ font-size: 50px;
+ }
+ .spec{
+ color:green;
+ font-size: 20px;
+ }
+```
+
+所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）。
+
+**（2）!important无法提升继承的权重，该是0还是0**
+
+比如HTML结构：
+
+```html
+
+```
+
+有CSS样式：
+
+```css
+ div{
+ color:red !important;
+ }
+ p{
+ color:blue;
+ }
+```
+
+由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
+
+干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
+
+**(3)!important不影响就近原则**
+
+如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
+答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
+
+为了验证这个问题，我们可以搞两层具有继承性的标签，然后给外层标签加一个!important，最终看看就近原则有没有被打破。举例如下：
+
+
+
+PS：做网站的时候，!important 尽量不要用。否则会让css写的很乱。
+
+- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？
+
+- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391