面试踩坑:3 类 CSS 选择器 + 4 步算清优先级逆袭攻略
qihemm 2025-05-07 15:55 17 浏览 0 评论
面试时，被问到 “CSS 选择器有哪些，优先级如何计算”，是不是瞬间手心冒汗？别慌！这看似基础的问题，藏着让面试官眼前一亮的关键。今天就带你吃透 CSS 选择器，下次面试直接拿捏！
被 CSS 样式 “支配” 的恐惧
刚入行时，我接到一个任务：给页面按钮换样式。满心以为改个css样式 button { color: red; } 就能搞定，结果页面毫无反应。查了半天才发现，原来被其他样式 “覆盖” 了！这就是 CSS 选择器优先级在 “捣乱”，相信不少前端小伙伴都遇到过类似情况，明明写了样式，却不生效，急得直挠头。
CSS 选择器大揭秘
CSS 选择器主要分为三大类，每类都有自己的 “性格” 和 “优先级”。
（一）基础选择器
- 标签选择器：最直白的选择器，直接用 HTML 标签名来选中元素。
/* 选中所有的p标签 */
p {
font-size: 16px;
}- 类选择器：通过给元素添加 class 属性来选中特定元素，使用 . 开头。
/* 选中class为"highlight"的元素 */
.highlight {
background-color: yellow;
}- ID 选择器：每个页面中，ID 是唯一的，使用 # 开头。
/* 选中id为"main-header"的元素 */
#main-header {
color: blue;
}（二）组合选择器
- 后代选择器：选中某个元素的后代元素，用空格分隔。
/* 选中div元素下的所有li元素 */
div li {
list-style-type: none;
}- 子选择器：选中某个元素的直接子元素，用 > 分隔。
/* 选中div元素下的直接子元素p */
div > p {
border: 1px solid gray;
}（三）伪类与伪元素选择器
- 伪类选择器：用于选中处于特定状态的元素，比如 :hover（鼠标悬停）、:active（点击激活）等。
/* 当鼠标悬停在a标签上时，改变颜色 */
a:hover {
color: red;
}- 伪元素选择器：用于创建一些不在文档树中的元素，比如 ::before、::after。
/* 在p元素前面添加内容 */
p::before {
content: " ";
}三、优先级计算：四步轻松搞定
CSS 优先级计算遵循 “四步法则”，用 a-b-c-d 来表示。
- 内联样式：a 为 1，直接写在 HTML 元素 style 属性里的样式，优先级最高。
<!-- 内联样式，优先级为1-0-0-0 -->
<div style="color: green;">我是内联样式</div>- ID 选择器：每出现一个 ID 选择器，b 加 1。
#myDiv {
/* 优先级为0-1-0-0 */
color: blue;
}- 类选择器、属性选择器、伪类选择器：每出现一个，c 加 1。
.myClass {
/* 优先级为0-0-1-0 */
color: orange;
}- 标签选择器、伪元素选择器：每出现一个，d 加 1。
div {
/* 优先级为0-0-0-1 */
color: black;
}比较优先级时，从左到右依次比较 a-b-c-d 的值，值大的优先级高。如果 a 相同，就比较 b，以此类推。
四、代码示例与对比效果
我们来看一个完整示例，感受不同选择器优先级的 “较量”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器优先级示例</title>
<style>
/* 标签选择器，优先级0-0-0-1 */
div {
color: gray;
}
/* 类选择器，优先级0-0-1-0 */
.myDiv {
color: orange;
}
/* ID选择器，优先级0-1-0-0 */
#mainDiv {
color: blue;
}
/* 内联样式，优先级1-0-0-0 */
</style>
</head>
<body>
<div id="mainDiv" class="myDiv">我该是什么颜色呢？</div>
</body>
</html>在这个例子中，最终文字颜色会是蓝色，因为 ID 选择器 #mainDiv 的优先级高于类选择器 .myDiv 和标签选择器 div。
灵活运用，提升效率
除了面试，实际开发中我们也经常会遇到需要调整 CSS 优先级的情况。比如，在引入第三方样式库时，如何用最小的改动覆盖库中的样式？这时，巧用 !important（虽然不推荐滥用）和合理提高选择器优先级就很关键。另外，当项目规模变大，样式冲突问题频发，有没有更好的命名规范和管理方法来避免优先级混乱呢？
六、模拟面试回答
面试官问起这个问题，你可以这样回答：“CSS 选择器主要有基础选择器、组合选择器，还有伪类和伪元素选择器。优先级计算就像打怪升级，内联样式是大 boss，优先级最高；ID 选择器次之；然后是类选择器、属性选择器这些；标签选择器优先级最低。比较优先级时，从高到低依次对比，谁的‘等级’高，谁的样式就生效。”
那么，你在实际项目中，你是更喜欢用 !important 快速解决样式覆盖问题，还是通过调整选择器优先级来规范样式？有人觉得 !important 简单粗暴，能快速见效；也有人认为它会破坏样式的可维护性，应该尽量避免。快来评论区分享你的看法，为自己的 “阵营” 打 call 吧！
相关推荐
- VLOOKUP的18种高阶用法大公开!99%的人都不知道的神操作!
-
作为被头条用户催更的Excel课代表，今天带来让HR追着要模板、让老板主动加薪的VLOOKUP终极指南！从基础到高阶一网打尽，文末送36个行业专用模板！一、为什么你的VLOOKUP总报错？血泪大数据...
- Vlooup公式，2种模糊查找匹配，1分钟学会
-
工作中，VLOOKUP公式使用频率是很高的，用来各种查找匹配问题今天我们分享两种模糊查找匹配问题，一种是文本的模糊查找匹配，一种是数字的模糊查找匹配问题1、文本模糊查找匹配使用模拟数据举个例子，原始数...
- 与vlookup功能相似的函数，照样搞定表格数据查询，简单还实用
-
在日常表格数据处理工作，说到数据查询，很多小伙伴首先想到的是Vlookup函数，老师的教程中也多次讲到Vlookup函数的用法和实例。其实在Excel中还有其他的数据查询函数公式或技巧，今天我们先来学...
- 别再折腾VLOOKUP了!DGET逆向查找10秒通关，小白必看
-
今天要掀翻一个“过气网红”——VLOOKUP！你是不是也经历过这些崩溃瞬间：逆向查找要交换列顺序，复制粘贴到手软！多条件查找要嵌套MATCH，公式长到怀疑人生！别忍了！今天教你用DGET函数一键封...
- 职场新人必学!VLOOKUP函数10分钟速成指南
-
正文："今天来讲解办公人入职期初函数VLOOKUP，这是所有职场人最重要也是最基础的技能。掌握它，90%的数据查找再不用求人！特别献给刚入职场的你——别让Excel成为加班理由。"——...
- 巧用Vlookup函数揪出“第三者”（vlookup第三个参数是什么）
-
在一张Excel表格的重复记录中，让你快速列出每种不同物品第2次或第n次出现的记录，你会怎么做？Vlookup函数就有这个本事。举例来说，产品或者物流表格中往往会记录有同一货物的多笔数据（如下图的今日...
- 分享12个VLOOKUP超经典用法（vlookup通俗易懂）
-
刚毕业那会，面试的时候经常会被问到会不会用Excel？我就理直气壮地回答：“会啊。”毕竟，简历上可是写着熟练。接着面试官扔出一句“那你会VLOOKUP吗？”我还是会一口咬定：“我会。“其实，我都没用过...
- 查找匹配别只知道Vlookup，Sumifs也可以!
-
工作中遇到查找匹配问题的时候，大家第一反应是不是都想到的Vlookup公式呢，有没有小伙伴们给Sumifs一点点机会的呢，有时候Sumifs比Vlookup更好用1、Vlookup公式举个例子，左边是...
- Excel函数讲解:VLOOKUP函数，轻松玩转数据查找
-
常用函数系列教学：VLOOKUP函数讲解(46)。不懂VLOOKUP函数怎么高效查找数据？闲话少叙直接开讲。基本含义：VLOOKUP函数用于在表格按垂直方向(到)上查找返回行数据。如何使用及注意事项？...
- CHOOSEROWS+CHOOSECOLS原来是一个超级查找函数组合!
-
场景一：要在学生名册中，抽查一名学生成绩。公式：=CHOOSEROWS(A1:D5,2)解析：第一参数A1:D5为数据区域，第二参数2表示提取第2行数据。把数据区域改为A2:D5,结合RANDBETW...
- 数据查询不止有vlookup函数，自定义zlookup函数查询操作更高效
-
Excel数据查询，相信大家首先会想到vlookup函数。毋庸置疑vlookup函数在Excel数据查询中作用是非常的强大。但是它也有一些不能实现的数据查询。如上图所示，我们需要根据人员的出现次数，提...
- 「EXCEL进阶」VLOOKUP函数怎么查询一个值返回多个结果
-
前言：VLOOKUP函数一般一次只能返回一个结果，本例介绍通过辅助列的方法使VLOOKUP函数查询一个值，返回这个值对应的多个结果。使用场景举例：根据表格中同一数值，返回对应值的多个结果。比如这张数据...
- WPS查找能手VLOOKUP函数使用方法讲解
-
各位同学好！今天我们来深度剖析WPS最实用的查找工具——VLOOKUP函数。这个函数能帮你在表格中快速定位并提取所需数据，可以帮你快速核对两批数据差异，还可以合并多个表格的关联信息，甚至可以帮你制作动...
- Excel常用10个函数:跨表查找Vlookup，适用于大数据中查找精确值
-
Hello大家好，我是Office米，今天，我们将和大家一起分享交流，常用的10个函数之一：查找引用函数VLOOKUP。在说VLOOKUP函数之前，我们要先了解，平时Excel日常工作中会遇到哪些问题...
- 掌握了这个套路，无论用 Excel vlookup 函数查找第几次结果都很轻松
-
用vlookup查找默认情况下是一对一出结果，如果要一对多查找，就需要用到各种技巧，具体方法我写过非常多了，可以搜索一下历史记录。只要掌握了今天这个套路，无论你想查找第几次重复值，都易如反掌。案例...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- VLOOKUP的18种高阶用法大公开!99%的人都不知道的神操作!
- Vlooup公式，2种模糊查找匹配，1分钟学会
- 与vlookup功能相似的函数，照样搞定表格数据查询，简单还实用
- 别再折腾VLOOKUP了!DGET逆向查找10秒通关，小白必看
- 职场新人必学!VLOOKUP函数10分钟速成指南
- 巧用Vlookup函数揪出“第三者”（vlookup第三个参数是什么）
- 分享12个VLOOKUP超经典用法（vlookup通俗易懂）
- 查找匹配别只知道Vlookup，Sumifs也可以!
- Excel函数讲解:VLOOKUP函数，轻松玩转数据查找
- CHOOSEROWS+CHOOSECOLS原来是一个超级查找函数组合!
- 标签列表
-
- 正版织梦模板 (30)
- 单片机c语言入门基础知识 (32)
- 手机编程游戏 (29)
- 优秀企业网站模板 (34)
- python编程入门自学书籍 (34)
- phpcms安装 (30)
- 自学excel免费视频教程全集 (36)
- php加密系统源码 (29)
- vlookup函数查找 (30)
- 电脑怎么下载java (32)
- vba编程实例速成150例 (30)
- 函数subtotal的用法 (31)
- java教程txt (32)
- java软件开发面试题 (30)
- sql数据库备份与还原方法 (33)
- 后台管理系统网站模板 (30)
- html表单属性有哪些 (31)
- 初中数学三角函数公式 (32)
- python爬虫教程 (30)
- 三角函数值对照表0到360度 (33)
- oracle数据库下载教程 (31)
- index函数什么意思 (34)
- indirect函数的详细用法 (31)
- excel函数round用法 (32)
- vlookup一对多查询并提取 (35)