阅读 869
面试官：请说下CSS选择器优先级

面试官：请说下CSS选择器优先级

什么是CSS选择器优先级？

CSS选择器优先级是指在给CSS元素设置样式的时候，如果同时有多个CSS选择器同时指向一个元素，那么优先级高的选择器的元素样式会最终应用到这个元素上。

通过权重来计算CSS选择器的优先级

1. !important的优先级是最高的。（没有这个属性的话，则按照下面的向量来计算优先级）

image.png

2. 权重相同，看谁的定义靠后，越靠后就会覆盖掉前面的样式

例子1

image.png

例子2

image.png

例子3（优先级相同，谁在后面谁起作用）

image.png

[参考资料]

2分钟掌握 CSS 选择器优先级（特异性）

文章分类
前端
文章标签
面试
CSS
相关推荐
  • krisking抗日时空
    3月前
    面试 CSS
    面试官：画一个边框宽度为0.5px的正方形叭。
    我们知道在写移动端页面时，有个经典的1px问题。该问题的原因是：在pc端的设计稿拿到移动端会产生视觉上的放大，解决该问题的方案就是将1px缩小为0.5px。 解决方法 1.直接写0.5px，不兼容。
    • 2898
    • 4
  • krisking抗日时空
    3月前
    面试 CSS
    面试官：层叠上下文是什么鸭？
    其实在页面渲染时，渲染过程划分的细一点，会有一个根据层叠上下文分层渲染的过程。那么什么是层叠上下文呢？ dom元素z轴判断顺序 层叠顺序：同一层叠上下文内：z-index > 0 → z-index:
    • 218
    • 评论
  • krisking抗日时空
    3月前
    面试 CSS
    面试官：BFC怎么触发，有什么作用？
    BFC即是块级格式化上下文的缩写，旨在创建一个独立的布局环境，其中的元素布局不受外界影响。 触发BFC的常见属性 overflow:hidden； display为inline-block、flex、
    • 178
    • 评论
  • 卷帘依旧
    1年前
    前端
    面试官：说下CSS选择器优先级
    CSS选择器包括行内样式、id选择器、class选择器、标签选择器，优先级依次降低，!important可用于优先级提升，比行内样式优先级还要高，权重的计算依次为1000,100,10,1，!important的优先级为正无穷。 但实际上，1000,100,10,1不是十进制中…
    • 4293
    • 3
  • 拜仁的月饼
    3月前
    CSS 面试
    【面试必知】CSS3都有哪些新特性
    前几天面试被问到一个问题：CSS 3有哪些新特性，我整个人都不好了。心里MMP，嘴上xxx。 事实上，当前主要网站均已支持CSS 3。但还是要知道CSS3有哪些新特性有助于通过面试
    • 548
    • 评论
  • Always_positive
    2月前
    前端 面试 CSS
    一道考查面试者CSS功底的面试题—实现CSS九宫格
    方法一：使用table HTML部分 CSS部分 方法二：使用flex布局 HTML部分 CSS部分 实现效果
    • 316
    • 评论
    一道考查面试者CSS功底的面试题—实现CSS九宫格
  • 歪马
    1年前
    CSS
    面试官：CSS如何实现固定宽高比？
    对于这个问题，你可能还没有过相关需求，或者还没有在面试的时候被问到过，但是歪马相信你终将有需要。 这个问题说起来也是老生常谈，歪马今天再次提起也是希望有朝一日当你被问到的时候，能够答得漂亮。 听到这个的时候你一定不要盲目的说出答案。因为这么问的话，题目并不明确。所以你可以帮面试…
    • 9303
    • 17
  • 天明夜尽
    1年前
    CSS GitHub
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
    一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。 久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。 初步前端与高级前端之间，最大的差距可能就是信息差造成的。 …
    • 3.8w
    • 37
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
  • krisking抗日时空
    3月前
    面试 CSS
    某跳动面试官：实现一下单个div一半红一半蓝叭。
    注意点： 1.只能使用一个div标签，也就是不能嵌套标签， 2.左边一半为红色，右边一半为蓝色。 代码 效果 还有什么实现方式嘛？欢迎大家留言哒。 记录记录！
    • 41
    • 评论
  • 天天天天才樱木花道
    3年前
    CSS 面试 前端
    记录自己的第一次面试经历，腾讯有梦想。
    第一次技术面试，比较紧张，面试过程20多分钟，最后问了面试官鹅厂前端生态和部门技术栈。下面是面试内容： 介绍一下自己，最近在看什么书，如何学习前端的。 说说你的项目，讲讲收获大的地方。 5.17就接到了腾讯面试官的电话，问了我一些基本情况，看了我的github和博客，后面也加了…
    • 187
    • 评论
    记录自己的第一次面试经历，腾讯有梦想。
  • 徐小夕
    10月前
    CSS 面试
    轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
    css3给我们前端开发带来了很便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5-Dooring编辑器 中的水波动画. 由于生成gif的工具比较弱(在线求好用的mac版gif录频生成工具...), 我不得不上传个原图, …
    • 1709
    • 2
    轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
  • alphardex
    1年前
    CSS
    请收下这72个炫酷的CSS技巧
    CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…
    • 4.2w
    • 76
    请收下这72个炫酷的CSS技巧
  • 答案cp3
    3月前
    CSS 面试
    总结css隐藏元素的几种方式
    这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战 前言 我们在写页面的时候，经常需要对元素执行隐藏操作，一般做法是用css的方法去隐藏，下面我把这些方法罗列一下，做一下对比，看完之后可以根
    • 204
    • 评论
  • 子弈
    2年前
    面试 前端
    面试分享：两年工作经验成功面试阿里P6总结
    本文主要给大家带来一些我面试的经历和经验，希望对正在求职的同学有所帮助。我先大致说下面试之前的个人情况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。 我写的篇幅可能有点长，如果只想看成功的面试请直接从阿里企业智能事业部（一面）开始，大家见谅哈。 …
    • 26.7w
    • 435
  • lentoo
    2年前
    Vue.js
    面试官：自己搭建过vue开发环境吗？
    前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。 但是对项目里的webp…
    • 7.0w
    • 226
    面试官：自己搭建过vue开发环境吗？
  • cdgogo
    2年前
    CSS
    css常见选择器：+、~、>、:first-child，:nth-child()的用法
    定义：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 正因为css选择器的样式为li+li{}，所以代码中的li标签就可以一直套用这个“公式”。 注：前端面包屑导航中经常用到该选择器。 通过这两个例子，可以…
    • 2.1w
    • 1
  • krisking抗日时空
    3月前
    面试 CSS
    面试官：画一个同心圆叭。
    注意点： 1.父子元素要使用"子绝父相"定位， 2.子元素水平垂直居中， 3.border-radius画圆角。 代码 效果 记录记录！
    • 84
    • 评论
  • CUGGZ
    2月前
    前端 CSS 面试
    实现九宫格布局，你能想到多少种方法？
    最近看到一个面试题：实现一个九宫格布局，用尽可能多的方式去实现？ 搜了一下牛客面经，腾讯、字节、百度、网易、京东等的面经中都出现过这道题目。所以今天就来实现一下，看有多少种实现方式。
    • 2911
    • 8
    实现九宫格布局，你能想到多少种方法？
  • HZFEStudio
    2月前
    面试 CSS
    BFC 的形成和作用，这是你没见过的深度解析……
    BFC 全称为 block formatting context，中文为“块级格式化上下文”。它是一个只有块级盒子参与的独立块级渲染区域，它规定了内部的块级盒子如何布局，且与区域外部无关。
    • 107
    • 评论
  • 火锅国大侠
    5月前
    CSS
    CSS选择器优先级、层叠、继承
    为什么我的css代码不起作用，也许是有人在我不知道的地方给我加了一个 !important 故意整我~~
    • 617
    • 1
    CSS选择器优先级、层叠、继承
    • 关于作者
    终身学习者 @ 西安电子科技大学
    获得点赞1,566
    文章被阅读84,037
    下载手机APP
    一个帮助开发者成长的社区
    相关文章
    面试官：说下CSS选择器优先级
    24
    3
    使用redux-thunk实现异步redux（基础文章）
    7
    0
    面试官：请实现单行文本居中，多行文本左对齐？
    3
    0
    深入理解CSS选择器优先级
    109
    7
    在Egg.js中实现RBAC权限管理
    5
    0