当前位置：首页 > news >正文

css优先级、继承、经典问题

news 2025/10/29 15:01:13

CSS 使用方式主要有以下几种：

CSS 使用方式

1. 内联样式（Inline Style）

直接在 HTML 元素的 style 属性中编写：

<div style="color: red; font-size: 16px;">内容</div>

2. 内部样式表（Internal Stylesheet）

在 HTML 文档的 <head> 标签中使用 <style> 标签：

<head><style>.container {color: blue;font-size: 14px;}</style>
</head>

3. 外部样式表（External Stylesheet）

通过 <link> 标签引入外部 CSS 文件：

<head><link rel="stylesheet" href="styles.css">
</head>

4. @import 导入

在 CSS 文件或 <style> 标签中使用 @import 导入其他 CSS 文件：

@import url('another.css');

优先级顺序

CSS 优先级遵循以下规则（从高到低）：

1. !important 声明

color: red !important;  /* 最高优先级 */

2. 内联样式（style 属性）

权重值：1000

<div style="color: red;">  <!-- 优先级很高 -->

3. ID 选择器

权重值：100

#header { color: blue; }

4. 类选择器、属性选择器、伪类选择器

权重值：10

.container { color: green; }
[type="text"] { color: green; }
:hover { color: green; }

5. 元素选择器、伪元素选择器

权重值：1

div { color: yellow; }
::before { color: yellow; }

6. 继承样式

最低优先级

特别说明

关于引入方式的优先级：

内联样式 > 内部样式表 = 外部样式表
内部样式表（<style>）和外部样式表（<link>）的优先级相同，因此建议将style放在link的后面。
当优先级相同时，遵循**“层叠”（Cascading）原则**：后出现的样式会覆盖先出现的样式

例如：

<head><link rel="stylesheet" href="first.css">  <!-- color: red --><style>div { color: blue; }  <!-- 这个会覆盖 first.css 中的 color --></style><link rel="stylesheet" href="second.css">  <!-- color: green，最终生效 -->
</head>

计算优先级的方法：

统计选择器中 ID 选择器的个数（a）
统计选择器中类选择器、属性选择器、伪类选择器的个数（b）
统计选择器中元素选择器、伪元素选择器的个数（c）
优先级 = (a, b, c)

例如：

#nav .list li → (1, 1, 1) = 111
.header .nav → (0, 2, 0) = 020
div p → (0, 0, 2) = 002

CSS 可继承属性

CSS 中的继承是指子元素会自动获得父元素的某些样式属性。以下是主要的可继承属性：

1. 文本相关属性

/* 字体相关 */
font-family          /* 字体系列 */
font-size            /* 字体大小 */
font-style           /* 字体风格（斜体等） */
font-weight          /* 字体粗细 */
font-variant         /* 字体变体 */
font                 /* 字体简写属性 *//* 文本样式 */
color                /* 文本颜色 */
line-height          /* 行高 */
letter-spacing       /* 字母间距 */
word-spacing         /* 单词间距 */
text-align           /* 文本对齐 */
text-indent          /* 文本缩进 */
text-transform       /* 文本转换（大小写） */
text-shadow          /* 文本阴影 */
white-space          /* 空白处理 */
word-break           /* 单词换行 */
word-wrap            /* 单词换行方式 */

2. 列表相关属性

list-style           /* 列表样式简写 */
list-style-type      /* 列表项标记类型 */
list-style-position  /* 列表项标记位置 */
list-style-image     /* 列表项标记图像 */

3. 表格相关属性

border-collapse      /* 表格边框合并 */
border-spacing       /* 表格边框间距 */
caption-side         /* 表格标题位置 */
empty-cells          /* 空单元格显示 */

4. 可见性

visibility           /* 可见性 */
cursor               /* 光标样式 */

5. 其他常用可继承属性

direction            /* 文本方向 */
quotes               /* 引号样式 */
orphans              /* 页面底部孤行数 */
widows               /* 页面顶部寡行数 */

不可继承的属性（常见）

为了对比，以下是一些不可继承的属性：

/* 盒模型相关 */
width, height
margin, padding
border
min-width, max-width
min-height, max-height/* 定位相关 */
position
top, right, bottom, left
z-index
float
clear/* 显示相关 */
display
overflow
opacity/* 背景相关 */
background (及其所有子属性)
background-color
background-image
background-position
等等

强制继承

即使属性默认不可继承，也可以使用 inherit 关键字强制继承：

.child {/* 强制继承父元素的 border */border: inherit;/* 强制继承父元素的 background-color */background-color: inherit;
}

其他继承相关的关键字

.element {/* 继承父元素的值 */property: inherit;/* 使用属性的初始值（默认值） */property: initial;/* 如果可继承则继承，否则使用初始值 */property: unset;/* CSS 重置：忽略所有样式（包括浏览器默认样式） */property: revert;
}

记忆技巧

可继承属性的规律：

大部分与文本、字体相关的属性都可继承
影响文档流布局的属性（如盒模型、定位）通常不可继承
一般来说，如果子元素继承该属性是合理的（如字体颜色），就会被设计为可继承

这样设计是合理的，因为我们通常希望整个页面或容器内的文本保持一致的字体和颜色，但不希望所有子元素都继承父元素的宽度、边距等布局属性。

经典问题

问题1：header颜色为什么是红色？我明明加了!important

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {width: 100%;height: 100%;display: flex;flex-direction: column;color: green !important;}.header {color: red;}</style></head><body><div class="container"><div class="header">header</div><div class="content">content</div><div class="footer">footer</div></div></body>
</html>