微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

CSS规则的优先级匹配_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:38:26
原创
1333人浏览过

css规则之间可以互相覆盖，这一点我们应该已经习以为常了。然而正是由于规则之间可以互相覆盖、子元素继承父元素的默认行为，导致了css冲突的问题。 碰到css冲突时，通常我们会加入一些更加详细的规则来明确如何显示，以此解决冲突。通常越详细的规则优先级会越高，但优先级究竟是如何定义的呢？

首先根据CSS定义位置来区别，优先级从低到高如下：

  • 浏览器默认样式（Browser Default Style）
  • 外部样式表
  • 内部样式表
  • 行内样式 (e.g., style="font-weight:bold")

    • 同样定义位置的规则，根据不同类型选择器的个数来确定。选择器的优先级从低到高如下规则：

  • F: Universal selectors (e.g., *)
  • E: Type selectors (e.g., h1)
  • D: Class selectors (e.g., .example)
  • C: Attributes selectors (e.g., [type="radio"])
  • B: Pseudo-classes (e.g., :hover)
  • A: ID selectors (e.g., #example)

    • 即 ID > 伪类 > 属性 > 类 > 元素 > 通配符，首先我们数规则中ID的个数，ID个数越多的规则优先级越高。如果相同，再数伪类，以此类推。

    来个例子：

    立即学习“前端免费学习笔记（深入）”；

    article p span{  color: blue;}#red{  color: red;}
    登录后复制

  • article p span的优先级："A=0, B=0, C=0, D=0, E=3, F=0 (000030)"
  • #red的优先级："A=1, B=0, C=0, D=0, E=0, F=0 (100000)"（更高！）

    • 再比如：

    先见AI
    先见AI

    数据为基，先见未见

    先见AI 95
    查看详情 先见AI 

    #wrapper header div nav #gnavi{  list-style-type: none;}#top #hright #gnavi{  list-style-type: square;}
    登录后复制

  • #wrapper header div nav #gnavi的优先级："A=2, B=0, C=0, D=0, E=3, F=0 (200030)"
  • #top #hright #gnavi的优先级："A=3, B=0, C=0, D=0, E=0, F=0 (300000)"（更高！）

    • 此外，最高优先级的是!import的属性，如果都加了!important那就继续数规则中属性和元素的个数。

    能避免!important的话就不要这样写了，这样的样式太难扩展了。

    参考链接：

  • http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
  • http://www.hongkiat.com/blog/css-priority-level/

    • 除非注明，本博客文章均为原创，转载请以链接形式标明本文地址： http://harttle.com/2015/07/16/css-priority.html

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：css实现基础几何图形_html/css_WEB-ITnose 下一篇：css 多栏自适应布局_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    如何在Atom中自定义HTML快捷键的详细教程 通过修改keymap.cson和init.coffee或使用snippets.cson，可在Atom中自定义HTML快捷键；推荐使用snippets为html!设置触发词，输入后按Tab即可生成带光标定位的完整HTML模板，提升编码效率。
    2025-11-14 10:58:03
    791
    如何下载打印html_HTML页面（打印样式/PDF导出）下载打印方法 使用浏览器打印功能可将HTML页面导出为PDF，通过“打印预览”调整布局、边距并选择“另存为PDF”即可保存；结合@mediaprint的CSS样式能优化输出效果，隐藏非必要元素、设置分页和字体；开发者还可利用html2pdf.js等库实现一键导出。
    2025-11-14 10:57:42
    119
    解决旧版Webkit渐变兼容性警告：深入理解与实践 本文旨在解决在CSS中使用渐变时，针对旧版Webkit浏览器（如Safari4+、早期Chrome）可能出现的“Missingvendor-prefixedCSSgradientsforOldWebkit”警告。通过分析该警告的根源——旧版Webkit对渐变语法的特殊要求，文章将详细介绍如何通过添加特定的-webkit-gradient前缀来确保样式在这些浏览器上的兼容性，并强调现代CSS兼容性检查的重要性。
    2025-11-14 10:54:27
    779
    jQuery表格单元格的访问与操作指南 本教程旨在详细阐述如何使用jQuery高效地选择、遍历和操作HTML表格中的单元格。文章将介绍核心的jQuery选择器和方法，如.each()、.text()和.html()，并通过具体的代码示例，指导开发者如何准确地读取、修改表格单元格的内容和属性，避免常见的操作误区，从而提升前端交互开发的效率和准确性。
    2025-11-14 10:50:23
    348
    内部CSS怎么嵌入HTML页面_内部CSS嵌入HTML页面的详细解析 使用内部CSS可为当前HTML页面单独设置样式，通过在中添加标签定义规则，利用元素、类或ID选择器控制外观，确保与HTML元素正确关联并调试生效。
    2025-11-14 10:50:03
    205
    html滚动条动态效果怎么实现_html滚动条动画与过渡效果教程 通过CSS和JavaScript结合实现HTML滚动条动态效果，首先利用CSS自定义WebKit浏览器滚动条样式并添加过渡动画，使用::-webkit-scrollbar系列伪元素设置轨道、滑块及悬停效果；接着通过scroll-behavior:smooth启用平滑滚动，使锚点跳转更自然；再结合JavaScript实现精细控制，如用requestAnimationFrame与缓动函数easeInOutQuad创建返回顶部动画；最后通过window.onscroll监听滚动事件，动态显示“回到顶部
    2025-11-14 10:46:02
    779
    解决Django图片上传与显示“文件未找到”错误：完整配置与实践指南 本教程详细指导如何在Django项目中正确配置和显示上传的图片，解决常见的“文件未找到”错误。内容涵盖ImageField的upload_to参数设置、MEDIA_ROOT和MEDIA_URL的配置、URL路由中媒体文件的服务，以及模板中图片的正确引用，确保图片能够成功存储并呈现在前端页面。
    2025-11-14 10:24:03
    327
    利用CSS自定义属性与JavaScript实现画廊图片独立旋转 本教程详细阐述如何通过结合CSS自定义属性（CSS变量）和JavaScript事件处理，解决画廊中多张图片点击旋转时全部同步旋转的问题。核心在于为每张图片设置局部CSS变量，并利用HTML的data-*属性将按钮与特定图片关联，最终通过JavaScript精确控制单张图片的旋转状态，实现高效且独立的图片交互效果。
    2025-11-14 10:20:10
    503
    Mac Notion数据库模板管理HTML+CSS学习项目 用Notion管理Mac上的HTML+CSS学习项目，可通过自定义数据库整合进度、知识点、代码练习与资源链接。1.创建主数据库，设标题、状态、类型、难度、耗时、完成日期、代码链接和笔记关联字段；2.预设三类模板：基础语法学习（含标签表格、MDN链接、练习题）、小项目实战（目标描述、技术点、截图、反思）、Bug调试记录（问题、错误代码、解决方案、知识点归类）；3.优化视觉风格，用灰色callout模拟Mac侧边栏，SFPro字体感排版，分隔线、Toggle隐藏细节，添加emoji提升可读性；4.建
    2025-11-14 10:16:03
    498
    深入理解CSS定位：确保元素在响应式布局中保持稳定 本教程深入探讨CSS定位属性，重点解决元素在屏幕缩放时位置不固定的常见问题。通过对比position:relative和position:absolute的工作原理，并结合具体代码示例，解释了为何使用百分比相对定位会导致元素漂移，并提供了利用绝对定位和固定像素值实现元素稳定定位的解决方案。文章还涵盖了定位上下文和响应式设计中的最佳实践。
    2025-11-14 09:59:02
    540
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部