异常教程

HTML <style> 标签（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页开发的世界里，HTML 


---

### 2.2 样式作用域与优先级规则  
#### 2.2.1 样式作用域的三种类型  
<style>标签定义的样式作用域取决于其在HTML文档中的位置：  

| 类型          | 定义位置               | 影响范围                     |  
|---------------|------------------------|------------------------------|  
| **文档级样式** | `<head>`中的<style>    | 整个HTML文档的所有匹配元素   |  
| **块级样式**   | `<body>`内的<style>    | 仅影响其后的同级元素          |  
| **内联样式**   | 元素内的style属性      | 仅影响当前元素               |  

**案例演示**：  
```html  
<head>  
  <style>  <!-- 文档级样式 -->  
    p { color: blue; }  
  </style>  
</head>  

<body>  
  <style>  <!-- 块级样式 -->  
    p { color: green; }  
  </style>  

  <p>这段文字会被绿色覆盖</p>  
</body>

2.2.2 样式优先级的“权重规则”

当多个样式规则冲突时，浏览器会根据以下优先级顺序选择最终样式：

  1. !important 标记（最高）
  2. 内联样式
  3. ID选择器（如#header）
  4. 类选择器（如.container）
  5. 元素选择器（如div）
  6. 继承样式（最低）

三、进阶技巧与常见问题解决

3.1 动态样式注入与JavaScript交互

通过JavaScript操作