LinDaiDai
diff --git a/‎CSS/CSS的基础知识.md
Lines changed: 622 additions & 0 deletions b/‎CSS/CSS的基础知识.md
Lines changed: 622 additions & 0 deletions
diff --git a/‎CSS/【问】position-fixed什么时候会失效？.md
Lines changed: 66 additions & 0 deletions b/‎CSS/【问】position-fixed什么时候会失效？.md
Lines changed: 66 additions & 0 deletions
diff --git a/‎CSS/伪类.md
Lines changed: 141 additions & 0 deletions b/‎CSS/伪类.md
Lines changed: 141 additions & 0 deletions
@@ -0,0 +1,66 @@
+## position: fixed什么时候会失效？
+我们知道，设置了`position: fixed`固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。
+也就是说此时给这种元素设置`top, left, right, bottom`等属性是根据**浏览器窗口**定位的，与其上级元素的位置无关。
+但是有一种情况例外：
+若是设置了`position: fixed`属性的元素，它的上级元素设置了`transform`属性则会导致固定定位属性失效。
+无论你的`transform`设置的是什么属性都会影响到`position: fixed`。
+看下面的案例1：
+```html
+<style>
+    .father {
+        width: 300px;
+        height: 300px;
+        background: yellow;
+        transform: translate(100px); 
+        /* transform: scale(0.5); */
+        /* transform: rotate(-45deg); */
+    }
+    .son {
+        width: 100px;
+        height: 100px;
+        background: red;
+        position: fixed;
+        top: 400px;
+    }
+</style>
+<body>
+<div class="father">
+   <div class="son"></div>
+</div>
+</body>
+```
+给父级加上了`transform`属性之后就会影响子级的固定定位了。如下图：
+![没加transform.png](https://upload-images.jianshu.io/upload_images/7190596-38462e3ec67bd654.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![加了transform.png](https://upload-images.jianshu.io/upload_images/7190596-5bcc360baa0d652b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**其实不仅仅是给父级加`transform`属性会失效，只要上级存在`transform`属性都会导致`position: fixed`失效。**
+
+案例2：
+```html
+<style>
+    .content{
+        transform: translate(100px);
+    }
+    .father {
+        width: 300px;
+        height: 300px;
+        background: yellow;
+    }
+    .son {
+        width: 100px;
+        height: 100px;
+        background: red;
+        position: fixed;
+        top: 400px;
+    }
+</style>
+<body>
+    <div class="content">
+        <div class="father">
+            <div class="son"></div>
+        </div>
+    </div>
+</body>
+```
+上面的案例也会影响`position: fixed`属性。
@@ -0,0 +1,141 @@
+# nth伪类选择器
+
+## 1 :nth-child(){ }
+
+> 作用： 选择父元素的第几个子元素
+
+```html
+<body>
+	<div>
+		<p></p>
+		<p></p>
+		<p></p>
+	</div>
+</body>
+```
+
+### 用法1:所有子元素: 
+
+```css
+div:nth-child(n){
+	color: red;
+}
+```
+
+
+
+### 用法2:所有奇数子元素: 
+
+```css
+div:nth-child(2n+1){
+	color: red;
+}
+```
+
+
+
+### 用法3:所有偶数子元素 : 
+
+```css
+div:nth-child(2n){
+	color: red;
+}
+```
+
+
+
+### 用法4:选择父元素的第几个子元素
+
+```css
+div:nth-child(2){
+	color: red;
+}
+```
+
+
+
+### 用法5:选择父元素标签内部第n个元素 
+
+**第n个元素必须的是:前面的这个标签才能生效 如果匹配失败，则不生效**
+
+例：
+
+```html
+<style>
+    ul p:nth-child(2) {
+        background: red;/*无效：想选择的是ul下的第二个p标签，但ul标签中没有p标签 所以不能生效;*/
+    }
+    ul li:nth-child(2) {/*有效：想选择的是ul下的第二个li标签，nth-child(2)前面也是li 所以能生效;*/
+        background: red;
+    }
+</style>
+<body>
+    <ul>
+        <li>我是li1</li>
+        <li>我是li2</li>
+    </ul>
+</body>
+```
+
+### 用法6 :nth-child(n+m){}     
+
+> 表示从第m个值开始,取包裹m的之后的所有项
+
+例：
+
+```
+:nth-child(n+2){}     表示选取除了第一项的所有项
+
+:nth-child(-n+m){}     表示选取前m项(包裹m)
+如：:nth-child(-n+2)     表示选取第一第二项;
+```
+
+
+
+## 2 :nth-last-child(){}
+
+> 用法：与`:nth-child()`用法相似，不过是从后往前
+
+如：
+
+选择父元素的倒数第二个子元素的 div 标签
+
+```css
+ div:nth-last-child(2){ }
+```
+
+
+
+## 3 :nth-of-type(){ }
+
+> 作用：选择属于其父元素的 第几个标签元素
+
+例：选择父元素的第二个p标签和第二个li标签
+
+```html
+<style>
+    ul p:nth-of-type(2) {
+    	background: red;
+    }
+    ul li:nth-of-type(2) {
+    	background: red;
+    }
+</style>
+<body>
+    <ul>
+        <p>我是p1</p>
+        <p>我是p2</p><!--红色-->
+        <li>我是li1</li>
+        <li>我是li2</li><!--红色-->
+    </ul>
+</body>
+```
+
+
+
+## 4 :nth-last-of-type(){ }
+
+> 选择属于其父元素的倒数 第几个标签元素
+
+
+