Web前端面试指导(十三)：css样式的优先级是怎么样的？

关注 智学无忧1

Web前端面试指导(十三)：css样式的优先级是怎么样的？

原创

智学无忧1 2017-05-08 16:27:19 ©著作权

文章标签 web 前端 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者智学无忧1的原创作品，如需转载，请与作者联系，否则将追究法律责任
题目点评

CSS样式的优先级规则给人的感觉总是摸不透，更不用说怎么去表达了，在网络上流传着很多版本，描述的都很复杂也不全面，看了之后还是不满意。我来给大家介绍一个比较系统、全面有比较容易记住的规则吧！

解答思路

样式优先级规则

 1.优先级顺序为：!important>style>权重值

 2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现

权重规则

标签的权重为1

class的权重为10

id的权重为100

权重取值示例     Web前端面试指导(十三)：css样式的优先级是怎么样的？_前端
  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

上一篇： Web前端面试指导(十二)：::before 和:before有什么区别？

下一篇： Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?

提问和评论都可以，用心的回复会被更多人看到 评论
发布评论
全部评论 () 最热 最新
相关文章
  • 理解 CSS 层叠、优先级和继承——WEB开发系列15

    Web 开发中，CSS (Cascading Style Sheets) 是决定网页视觉呈现的关键技术之一。它为 HTML (Hypertext Markup Language) 提供样式，使得开发者能够控制页面布局、字体、颜色和其他视觉元素。然而，CSS 的强大功能伴随着一定的复杂性，尤其是在处理层叠、优先级和继承这些核心概念时。
    CSS html 选择器 web 前端
  • 【Web前端】HTML样式“CSS”

    HTML 和 CSS 是构建现代网页的基础。HTML（超文本标记语言）负责定义网页的结构，而 CSS（层叠样式表）则用于控制网页的外观和布局。
    CSS HTML html 前端
  • 【前端面试】2024年前端面试题之JS篇

    请简述JavaScript中的thisJS 中的 this 是一个相对复杂的概念，不是简单几句能解释清楚的。粗略地讲，函数的调用方式决定了 this 的值。我阅读了网上很多关于 this 的文章，Arnav Aggrawal 写的比较清楚。this 取值符合以下规则：在调用函数时使用 new 关键字，函数内的 this 是一个全新的对象。 如果 apply、call 或 bind 方法用于调用、创
    前端 面试题 前端源码 商城源码 开源项目
  • 前端基础-CSS样式的优先级

    样式的优先级（了解）1.强制优先级（important）语法：样式属性:值 !important;示意图注意：只针对当前这一条css属性2.选择器优先级伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承示意图3.伪对象选择器的优先级（了解）首...
    css html 选择器 权重 优先级
  • 《前端面试题》- CSS - CSS选择器的优先级

    行内样式+1000d选择器+100属性选择器、class或者伪类+10元素选择器，或者伪元素+1通配符+0 参考网址：https://blog....
    html 选择器 伪元素
  • CSS样式的优先级...

    当同一个Html元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。1.浏览器缺省设置 2.外部样式表3.内部样式表（位于 标签内部） 4.内联样式（在 HTML 元素内部）因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
    css html 浏览器 外部样式表 HTML
  • Web前端面试指导(十五)：CSS样式-display有哪些作用？

    题目点评其实就是要你说清楚该属性有哪些值，每个值都有什么作用，这个题目可以答得很简单，但要答全也并非是一件容易的事情。元素默认的display值的情况如下（这个一般很少人注意这一点） block(块级元素) <div>、<p> <ul> <ol> <form> …… inline（内联元素） &lt
    web 前端
  • CSS样式优先级

    CSS优先级 当样式表比较复杂时，很容易出现多个样式对作用于一个标签的情况，这时就需要注意CSS优先级来决定哪些样式会被作用于该标签，哪些会被覆盖。 选择器的优先级 对于标签自有的属性，选择器的优先级规则为: 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器
    选择器 选择符 优先级
  • css面试点-样式优先级详解

    总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性选择器的特殊性值(Specificity)表述为4个部分，用0,0,0,0表示最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的权重表示1.0.0.0.0。 ...
    选择器 权重 权值
  • css样式权重优先级

    css样式权重优先级
    css 优先级 样式权重
  • CSS样式之优先级

    说到到css的样式优先级，今天偶再来回顾下，从css的样式优先级可分为两个部分：　　1、从CSS代码放置的位置看权重优先级：　　     内联样式 > 内部嵌入样式 >外联样式　　2、从样式选择器的权重优先级：　　     Important > 内联样式 > ID
    标签 元素 background 通配符 优先级
  • 关于CSS样式优先级

     一般情况下：[内联样式 [1.0.0.0] > [4位特殊性标志] > 声明先后顺序内联样式     >    ID选择器   >   类，属性，伪类 选择器  >   元素标签，伪元素 选择器[1.0.0.0] &
    职场 web css web开发 休闲
  • CSS样式表的优先级

    前面，我们已经学完了内联样式、内部样式和外部样式。大家思考一个问题，如果三个样式表修饰同一个元素，哪一个优先起作用呢？（动画演示效果）带着这个问题，我们来做个实验。来到编辑器，创建一个文件夹 003-multiple-css，在文件夹里创建一个 multiple.html 文件。构建基础代码。添加 h1 和 p 两个元素，分别填入一些文本。给 h1 定义内联样式，style 等于 color bl
    内部样式 优先级 外部样式
  • Web前端面试指导(十六)：为什么要初始化CSS样式？

    题目点评这个题目乍一看感觉怪怪的，什么叫初始化样式了？如果换一句话你可能就理解了，就是通用样式。这道题目主要涉及的是理论方面的知识，不用写代码，只要描述清楚就可以了初始化样式的原因 因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。 
    web 前端
  • 关于CSS的优先级,CSS优先级计算

    定原则二： #id > .class > 标签选择符原则三：越具体越强大原则四：标签#id >#id ; 标签.class > .classCSS优先级权重计算法CSS优先级包含四个级别（标签内选择符，ID
    选择符 优先级 CSS
  • Web前端面试指导(十一)：样式导入有哪些方式？

    样式导入方式linkimport使用方式link的使用[css] view plain copy <link href="index.css" rel="stylesheet">  import的使用[css] view plain copy <style type="t
    web 前端
  • css样式表中的样式的优先级

    有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下#navigator {    height: 100%;    width: 200;    position: absolute;    left: 0;    border: solid 2 #EEE;}.cu
    style 优先级 absolute position border
  • !Css的优先级

    每天一记： 首先： !import的样式优先级高于一切 Body中 优先
    选择器 优先级 选择符
  • CSS的优先级

    1） 内嵌样式最高，其次是内部样式与外部样式并列，以最后定义的为准2） 同
    选择符 html css
  • css样式权重优先级，css样式优先级

    样式选择器权重优先级： important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 important的权重为1,0,0,0 ID的权重为0,1,0,0 类的权重为0,
    权重 优先级 css css样式 内部样式表
智学无忧1
    关注
    精品课程领资料
    免费资料>

    2024软考
    高级 中级 初级

    华为认证
    数通 云计算 安全

    厂商认证
    K8s Oracle 红帽

    IT技术
    数据库 网络安全 AIGC
    近期文章
    • 1.Linux运维高手工具全集及功能分类：20+必备神器
    • 2.120V04无刷电机N沟道MOS管-HCE40N11L 40V120A 大电流 低内阻 抗雪崩能力强 反向续流 一致性好
    • 3.光端机的模块化设计：灵活应对不同网络需求
    • 4.全球ABS用防静电剂市场展望：2030年预计达到22亿元
    • 5.数字化维保：医疗设备稳定运行的新引擎
    新人福利
    • 意见
      反馈
    • 训练营训练营

    举报文章

    请选择举报类型

    内容侵权 涉嫌营销 内容抄袭 违法信息 其他

    具体原因

    包含不真实信息 涉及个人隐私

    原文链接（必填）

    补充说明

    0/200

    上传截图

    格式支持JPEG/PNG/JPG，图片不超过1.9M

    已经收到您得举报信息，我们会尽快审核
    • 赞
    • 收藏
    • 评论
    • 分享
    如有误判或任何疑问，可联系 「小助手微信：cto51cto」申诉及反馈。
    我知道了
    51CTO首页
    AI.x社区
    博客
    学堂
    精品班
    软考社区
    免费课
    企业培训
    鸿蒙开发者社区
    WOT技术大会
    IT证书
    公众号矩阵
    移动端
    短视频 免费课程 课程排行 直播课 软考学堂
    全部课程 厂商认证 IT技术 24年11月软考 PMP项目管理 免费题库
    在线学习
    文章 资源 问答 课堂 专栏 直播
    51CTO
    鸿蒙开发者社区
    51CTO技术栈
    51CTO官微
    51CTO学堂
    51CTO博客
    CTO训练营
    鸿蒙开发者社区订阅号
    51CTO软考
    51CTO学堂APP
    51CTO学堂企业版APP
    鸿蒙开发者社区视频号
    51CTO软考题库
    51CTO博客

    51CTO博客

    • 首页
    • 关注
    • 排行榜
    • 精品课程升职加薪
    • 免费资料领资料
    • 软考题库软考题库
      软考题库
      科目全、试题精、讲解专业，扫码免费刷
    • 搜索历史 清空
      热门搜索
      查看【 】的结果
    • 写文章
    • 创作中心
    • 登录注册
    51CTO博客

    Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号

    关于我们
    官方博客 全部文章 热门标签 班级博客
    了解我们 网站地图 意见反馈
    友情链接
    鸿蒙开发者社区 51CTO学堂
    51CTO 软考资讯