前端学习之CSS

折翼的恶魔2025-09-27 16:23

CSS选择器学习笔记

一、基础选择器（FED9示例）

css 复制代码

/* 标签选择器：直接选中所有指定标签 */
div {
    color: rgb(255, 0, 0);
    font-size: 20px; /* 公共样式 */
}

/* 类选择器：通过class属性定位元素 */
.green {
    color: rgb(0, 128, 0); /* 覆盖标签选择器颜色 */
}

/* ID选择器：通过唯一id属性定位元素 */
#black {
    color: rgb(0, 0, 0); /* 最高优先级覆盖 */
}

特性总结：

优先级权重：ID选择器(100) > 类选择器(10) > 标签选择器(1)
应用场景 ：
- 标签选择器：统一基础样式
- 类选择器：复用相同样式
- ID选择器：唯一元素定制样式

二、伪类选择器（FED10示例）

css 复制代码

/* :nth-child() 伪类选择器 */
ul li:nth-child(2n) {  /* 2n表示偶数位置 */
    background-color: rgb(255, 0, 0);
}

核心要点：

选择器结构：父元素子元素:伪类
常用公式：
- 2n/even：偶数元素
- 2n+1/odd：奇数元素
- n+2：第2个开始所有元素
其他常用伪类：
- :hover 鼠标悬停
- :first-child 首个子元素
- :last-child 最后一个子元素

三、伪元素（FED11示例）

css 复制代码

div::after {  /* 双冒号语法 */
    content: "";          /* 必须属性 */
    width: 20px;
    height: 20px;
    background-color: rgb(255, 0, 0);
    display: block;       /* 转换为块级元素 */
}

关键知识：

伪元素类型：
- ::before 在内容前插入
- ::after 在内容后插入（本例使用）
必备属性：
- content：定义插入内容（空字符串也可）
- display：控制渲染方式（block/inline-block）
与伪类的区别：
- 伪类：选择已有元素的状态
- 伪元素：创建虚拟元素并添加样式

选择器优先级计算模型

设标签选择器权重为 $a$ ，类选择器为 $b$ ，ID选择器为 $c$ ，则优先级为： $$ P = c \times 100 + b \times 10 + a $$ 比较规则：高位优先（如ID选择器权重始终高于类选择器）

示例验证：
div#black 权重 = $1 \\times 100 + 0 \\times 10 + 1 = 101$
.green 权重 = $0 \\times 100 + 1 \\times 10 + 0 = 10$