From d3de80fea895ce6ab43e508639fa1c068ddc6d34 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Tue, 11 Jan 2022 10:06:41 +0800
Subject: [PATCH] fix

---
 blog/front-edn-learn/css-selector.md          | 152 ++++++++++++++++++
 blog/front-edn-learn/demo/css-selector-1.html |  12 ++
 blog/front-edn-learn/demo/css-selector-2.html |  12 ++
 blog/front-edn-learn/demo/css-selector-3.html |  11 ++
 blog/front-edn-learn/demo/css-selector-4.html |  10 ++
 blog/front-edn-learn/demo/css-selector-5.html |  10 ++
 blog/front-edn-learn/index.md                 |   4 +-
 7 files changed, 210 insertions(+), 1 deletion(-)
 create mode 100644 blog/front-edn-learn/css-selector.md
 create mode 100644 blog/front-edn-learn/demo/css-selector-1.html
 create mode 100644 blog/front-edn-learn/demo/css-selector-2.html
 create mode 100644 blog/front-edn-learn/demo/css-selector-3.html
 create mode 100644 blog/front-edn-learn/demo/css-selector-4.html
 create mode 100644 blog/front-edn-learn/demo/css-selector-5.html

diff --git a/blog/front-edn-learn/css-selector.md b/blog/front-edn-learn/css-selector.md
new file mode 100644
index 0000000..71b2f3a
--- /dev/null
+++ b/blog/front-edn-learn/css-selector.md
@@ -0,0 +1,152 @@
+# CSS 选择器
+
+## 颜色取值
+
+- 文字颜色 color
+- 背景颜色 background-color
+
+默认背景色是透明
+
+```css
+background-color: transparent;
+```
+
+| 颜色表示方式   | 表示含义                      | 属性值             |
+| -------------- | ----------------------------- | ------------------ |
+| 关键词         | 预定义的颜色名                | red、green、blue   |
+| rbg 表示法     | 红绿蓝三原色，取值 0-255      | rgb(0,0,0)         |
+| rgba 表示法    | 红绿蓝三原色+透明度，取值 0-1 | rgba(0, 0, 0, 0.5) |
+| 十六进制表示法 | #开头                         | #000000 简写 #000  |
+
+```html
+<p style="color: green;">Hello World!</p>
+<p style="color: rgb(0, 255, 0);">Hello World!</p>
+<p style="color: rgba(0, 255, 0, 0.5);">Hello World!</p>
+<p style="color: #00FF00;">Hello World!</p>
+<p style="color: #0F0;">Hello World!</p>
+```
+
+<output>
+<p style="color: green;">Hello World!</p>
+<p style="color: rgb(0, 255, 0);">Hello World!</p>
+<p style="color: rgba(0, 255, 0, 0.5);">Hello World!</p>
+<p style="color: #00FF00;">Hello World!</p>
+<p style="color: #0F0;">Hello World!</p>
+</output>
+
+## 水平居中
+
+```css
+margin: 0 auto;
+```
+
+div、p、h 需要设置元素的宽度，否则会自动撑满父元素
+
+```html
+<div
+  style="margin: 0 auto; width:200px; border: 1px solid #cccccc; text-align: center;"
+>
+  Hello World!
+</div>
+```
+
+<output>
+<div style="margin: 0 auto; width:200px; border: 1px solid #cccccc; text-align: center;">Hello World!</div>
+</output>
+
+## 选择器
+
+1、复合选择器
+
+（1）后代选择器
+
+```css
+父选择器 后代选择器: {
+}
+```
+
+示例：
+
+[](demo/css-selector-1.html ':include :type=code')
+
+[](demo/css-selector-1.html ':include height=100')
+
+（2）子代选择器
+
+```
+父选择器 > 子代选择器: { }
+```
+
+示例：
+
+[](demo/css-selector-2.html ':include :type=code')
+
+[](demo/css-selector-2.html ':include height=100')
+
+2、并集选择器
+
+```css
+选择器1, 选择器2: {
+}
+```
+
+示例：
+
+[](demo/css-selector-3.html ':include :type=code')
+
+[](demo/css-selector-3.html ':include height=100')
+
+3、交集选择器
+
+```
+选择器1选择器2: { }
+```
+
+示例：
+
+[](demo/css-selector-4.html ':include :type=code')
+
+[](demo/css-selector-4.html ':include height=100')
+
+4、hover 伪类选择器
+
+鼠标悬停状态
+
+```css
+选择器:hover {
+}
+```
+
+示例：
+
+[](demo/css-selector-5.html ':include :type=code')
+
+[](demo/css-selector-5.html ':include height=100')
+
+5、Emmet 语法
+
+- 简写语法，快速生成代码
+- VS Code 等代码编辑器自带
+
+| 语法       | 示例        | 效果                                      |
+| ---------- | ----------- | ----------------------------------------- |
+| 标签名     | div         | `<div></div>`                             |
+| 类选择器   | .red        | `<div class="red"></div>`                 |
+| id 选择器  | #one        | `<div id="one"></div>`                    |
+| 交集选择器 | p.red#one   | `<p class="red" id="one"></p>`            |
+| 子代选择器 | ul>li       | `<ul><li></li></ul>`                      |
+| 内部文本   | ul>li{内容} | `<ul><li>Hello</li></ul>`                 |
+| 创建多个   | ul>li\*3    | `<ul><li></li><li></li><li></li></ul>`    |
+| 创建自增   | ul>li{$}\*3 | `<ul><li>1</li><li>2</li><li>3</li></ul>` |
+| 同级       | div+p       | `<div></div><p></p>`                      |
+
+css 提示
+
+| 单词首字母 | 效果                          |
+| ---------- | ----------------------------- |
+| fw         | font-weight                   |
+| w          | width                         |
+| h          | height                        |
+| bgc        | backgroud-color               |
+| lh         | line-height                   |
+| w300+h200  | `width: 300px;height: 200px;` |
diff --git a/blog/front-edn-learn/demo/css-selector-1.html b/blog/front-edn-learn/demo/css-selector-1.html
new file mode 100644
index 0000000..f2e7516
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-selector-1.html
@@ -0,0 +1,12 @@
+<style>
+    div span {
+        color: green;
+    }
+</style>
+
+<div>
+    <span>Hello World!</span>
+    <p>
+        <span>Hello World!</span>
+    </p>
+</div>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-selector-2.html b/blog/front-edn-learn/demo/css-selector-2.html
new file mode 100644
index 0000000..bc923c1
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-selector-2.html
@@ -0,0 +1,12 @@
+<style>
+    div>span {
+        color: green;
+    }
+</style>
+
+<div>
+    <span>Hello World!</span>
+    <p>
+        <span>Hello World!</span>
+    </p>
+</div>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-selector-3.html b/blog/front-edn-learn/demo/css-selector-3.html
new file mode 100644
index 0000000..77c6b99
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-selector-3.html
@@ -0,0 +1,11 @@
+<style>
+    p,
+    span {
+        color: green;
+    }
+</style>
+
+<div>
+    <span>Hello World!</span>
+    <p>Hello World!</p>
+</div>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-selector-4.html b/blog/front-edn-learn/demo/css-selector-4.html
new file mode 100644
index 0000000..67e886e
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-selector-4.html
@@ -0,0 +1,10 @@
+<style>
+    span.title {
+        color: green;
+    }
+</style>
+
+<div>
+    <p class="title">Hello World!</p>
+    <span class="title">Hello World!</span>
+</div>
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/css-selector-5.html b/blog/front-edn-learn/demo/css-selector-5.html
new file mode 100644
index 0000000..7fc0717
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-selector-5.html
@@ -0,0 +1,10 @@
+<style>
+    p:hover {
+        color: green;
+    }
+</style>
+
+<div>
+    <p>Hello World!</p>
+    <span>Hello World!</span>
+</div>
\ No newline at end of file
diff --git a/blog/front-edn-learn/index.md b/blog/front-edn-learn/index.md
index d77868e..875acb4 100644
--- a/blog/front-edn-learn/index.md
+++ b/blog/front-edn-learn/index.md
@@ -20,4 +20,6 @@
 
 3. [CSS 层叠样式表](blog/front-edn-learn/css.md)
 
-4. [CSS字体和文本样式](blog/front-edn-learn/css-font.md)
+4. [CSS 字体和文本样式](blog/front-edn-learn/css-font.md)
+
+5. [CSS 选择器](blog/front-edn-learn/css-selector.md)
-- 
GitLab