From 9f217b489b9a41a69afe3474d15135a0c26517b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=9B=A6?= <2196258247@qq.com>
Date: Sun, 20 Oct 2024 20:01:19 +0800
Subject: [PATCH 1/3] =?UTF-8?q?20041014=E7=AC=AC=E5=8D=81=E4=B8=89?=
=?UTF-8?q?=E6=AC=A1=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../20241014 -css\344\274\252\347\261\273.md" | 500 ++++++++++++++++++
1 file changed, 500 insertions(+)
create mode 100644 "\345\210\230\346\233\246/20241014 -css\344\274\252\347\261\273.md"
diff --git "a/\345\210\230\346\233\246/20241014 -css\344\274\252\347\261\273.md" "b/\345\210\230\346\233\246/20241014 -css\344\274\252\347\261\273.md"
new file mode 100644
index 0000000..73915f1
--- /dev/null
+++ "b/\345\210\230\346\233\246/20241014 -css\344\274\252\347\261\273.md"
@@ -0,0 +1,500 @@
+## css伪类
+### 常见的伪类用法
+**常见的CSS伪类及其用法：**
+
+- `:hover`：当鼠标悬停在元素上时应用样式。
+- `:active`：当元素处于活动（点击）状态时应用样式。
+- `:focus`：当元素获得焦点时应用样式，通常用于表单元素。
+- `:visited`：选择已访问的链接。
+- `:first-child`：选择第一个子元素。
+- `:last-child`：选择最后一个子元素。
+- `:nth-child(n)`：选择第n个子元素。
+- `:nth-of-type(n)`：选择同类型的第n个元素。
+- `:not(selector)`：选择不匹配给定选择器的元素。
+
+### CSS伪类示例
+**hover 示例：**
+```css
+.button:hover {
+ background-color: #ff0000;
+ color: #ffffff;
+}
+```
+当鼠标悬停在按钮上时，背景颜色变为红色，文本颜色变为白色。
+
+**focus 示例：**
+```css
+.input-field:focus {
+ border-color: #00ff00;
+ box-shadow: 0 0 5px #00ff00;
+}
+```
+当输入框获得焦点时，边框颜色变为绿色，添加一个淡淡的绿色阴影效果。
+
+**nth-child 示例：**
+```css
+ul li:nth-child(odd) {
+ background-color: #f0f0f0;
+}
+```
+选择ul元素下的奇数项，并将它们的背景颜色设置为淡灰色。
+
+**visited 示例：**
+```css
+a:visited {
+ color: #888888;
+}
+```
+选择已访问的链接，并将其文本颜色设置为浅灰色。
+
+## 选择器序列练习
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+