首页
/ 正文

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

更新时间: 2025-04-12 12:18:02

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

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

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 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 样式优先级的“权重规则”

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

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

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

3.1 动态样式注入与JavaScript交互

通过JavaScript操作