前端学习之CSS

CSS选择器学习笔记

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

/* 标签选择器：直接选中所有指定标签 */
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示例）

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

核心要点：

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

---

三、伪元素（FED11示例）

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

关键知识：

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

---

选择器优先级计算模型

设标签选择器权重为 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