Investigator Veritatis

Css三大特性

3 min read

1. 《CSS三大特性：层叠 / 继承 / 权重一遍吃透》

1.1 层叠性（Cascading）

  • 1.1.1 核心定义
    👉 多个样式可以叠加作用在同一个元素上
  • 1.1.2 示例

div {
color: red;
}

.box1 {
font-size: 35px;
}

好好学习

👉 最终效果：

  • 颜色：红色
  • 字体大小：35px
  • 1.1.3 核心理解
    • 不同属性 → 同时生效
    • 相同属性 → 进入“权重判断”

1.2 继承性（Inheritance）

  • 1.2.1 核心定义
    👉 子元素会继承父元素的部分样式
  • 1.2.2 可继承属性（必须记）
    • color（文字颜色）
    • font（字体相关）
    • text（文本相关）
    • line-height（行高）
    • cursor（鼠标样式）
  • 1.2.3 不可继承属性
    • width / height
    • margin / padding
    • border
    • background
  • 1.2.4 示例（结合原文档）

.parent {
font: normal 700 30px ‘华文仿宋’;
color: deeppink;

width: 300px;  
height: 300px;  
background-color: aquamarine;

}

外部div
内部div 文字

👉 子元素效果：

  • ✔ 字体、颜色继承
  • ❌ 宽高、背景不继承
  • 1.2.5 本质一句话
    👉 继承只发生在“文字相关属性”

1.3 权重性（优先级，核心中的核心）

1.3.1 权重排序（必须背）

继承 < * < 标签 < 类 < id < 行内 < !important

1.3.2 权重数值模型（理解用）

  • 1.3.2.1 权重值
    • 通配符：0
    • 标签：1
    • 类：100
    • id：1000

👉 数值越大 → 越优先

1.3.3 示例（经典）

div {
background-color: blue;
}

.box1 {
background-color: red;
}

box1 {
background-color: yellow;
}

啥也不是

👉 最终结果：黄色（id生效）

1.3.4 复合选择器权重

div.box1 {
/* 1 + 100 = 101 */
}

👉 规则：

  • 权重 = 所有选择器相加

1.3.5 后代 vs 子代（文档重点）

div .son { } /* 后代 /
div > .son { } / 子代 */

  • 后代：所有子孙
  • 子代：只选儿子

👉 谁更“精确” → 谁优先

1.3.6 !important（考试会考）

div {
background-color: red !important;
}

  • 强制最高优先级
  • ❌ 实战不推荐（会破坏结构）

2. 本章核心总结（必须掌握）

2.1 三大特性一句话

  • 层叠：可以叠加
  • 继承：部分继承
  • 权重：决定谁生效

2.2 最核心规则

!important > 行内 > id > 类 > 标签 > *

2.3 高频考点

  • 继承哪些？不继承哪些？
  • 权重谁大？
  • 复合选择器怎么算？
  • 子代 vs 后代区别

2.4 实战理解（关键）

  • 样式冲突 → 看权重
  • 文字样式 → 多用继承
  • 避免滥用 !important

Recent Notes

Graph View