diff --git a/blog/front-edn-learn/css-selector.md b/blog/front-edn-learn/css-selector.md
new file mode 100644
index 0000000000000000000000000000000000000000..71b2f3a7ffeac5f2edd36873fd402ee2ecaa2c90
--- /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
+Hello World!
+Hello World!
+Hello World!
+Hello World!
+Hello World!
+```
+
+
+
+## 水平居中
+
+```css
+margin: 0 auto;
+```
+
+div、p、h 需要设置元素的宽度，否则会自动撑满父元素
+
+```html
+
+ Hello World!
+
+```
+
+
+
+## 选择器
+
+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 | `` |
+| 类选择器 | .red | `` |
+| id 选择器 | #one | `` |
+| 交集选择器 | p.red#one | `` |
+| 子代选择器 | ul>li | `` |
+| 内部文本 | ul>li{内容} | `` |
+| 创建多个 | ul>li\*3 | `` |
+| 创建自增 | ul>li{$}\*3 | `` |
+| 同级 | div+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 0000000000000000000000000000000000000000..f2e7516c0a867cce9f34badbacc87e1efba00f5e
--- /dev/null
+++ b/blog/front-edn-learn/demo/css-selector-1.html
@@ -0,0 +1,12 @@
+
+
+
+
Hello World!
+
+ Hello World!
+
+
+
Hello World!
+
+ Hello World!
+
+
+
Hello World!
+
Hello World!
+
+
Hello World!
+
Hello World!
+
+
Hello World!
+
Hello World!
+