前端面试:css选择器有哪些，选择器的权重的优先级
moboyou 2025-06-13 07:52 3 浏览
选择器类型
1.ID #id
2.class .class
3.标签 p
4.通用 *
5.属性 [type="text"]
6.伪类 ：hover
7.伪元素 ::first-line
8.子选择器、相邻选择器
权重计算规则
1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值.
CSS样式覆盖规则
规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
样式的权值取决于样式的选择器，权值定义如下表:
CSS选择器权值标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10
可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。
规则四：样式权值相同时，后者获胜。
规则五：!important的样式属性不被覆盖。
!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属 性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red
!important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥 用!important。
相关推荐
- Scrcpy:一款免费、功能丰富且实用的Android镜像投屏控制软件
-
随着科技的不断发展，我们的生活中出现了越来越多的智能设备。尤其是智能手机，已经成为了我们日常生活中不可或缺的一部分。然而，有时候我们需要在电脑上操作手机，例如进行应用程序的调试、游戏挂机等。这时，拥有...
- 考公网课资源百度云网盘，公务员国考省考网课视频资源链接
-
考公网课资源百度云网盘，公务员国考省考网课视频资源链接大家好，国考将近，又到一年一度的大家冲刺的时候了，大家准备考公网课资源怎么样呢？今天来聊一聊，就是我作为一个集众多公考劣势于一身的人，是如何通过自...
- 百度推送收录工具【2025最全教程】
-
目录第一步：百度推送token获取第二步：百度推送token填写第三步：导入百度推送链接第四步：开始百度批量链接推送百度推送token获取如下图登录百度站长管理平台获取百度token注：百度token...
- 2025年公务员笔试网课视频资料百度云网盘分享(...
-
2025年公务员笔试网课视频资料百度云网盘分享（国考省考通用）2025年公务员笔试网课视频资料备考，很多小伙伴都开始了准备。有同学询问如何有效进行备考计划。考虑到在职备考的同学较多，我今天给每天有三个...
- 技术控:免百度云客户端突破下载速度
-
首先要说大神们这篇文章你可以忽视了估计方法你早就知道了首先放张图看到小编在没有使用百度云会员登陆的情况下用我们这次要介绍的下载利器IDM下载文件的时候下载速度已经达到了2.1MB/...
- 2022年中级会计师考试各科目网课视频教程百度网盘下载
-
2022年中级会计师各科目精讲班视频课件资料百度云网盘下载中级会计师资料包含：基础班/精讲班/习题班/冲刺班/押题班电子版教材适合有/无基础，需系统学习的考生中级会计师备考资料下载地址：www.34l...
- Python学不会来打我(34)python函数爬取百度图片_附源码
-
随着人工智能和大数据的发展，图像数据的获取变得越来越重要。作为Python初学者，掌握如何从网页中抓取图片并保存到本地是一项非常实用的技能。本文将手把手教你使用Python函数编写一个简单的百度图片...
- 自研雪狼引擎!百度杀毒3.0正式版评测
-
2014年10月22日，百度杀毒3.0正式版终于发布了！相比旧版，百度杀毒3.0最大的两大在于百度自家研发的雪狼杀毒引擎和冰山防御体系。如果说旧版百度杀毒的主打方向是卡巴芯保安全，那么新版的百度杀毒3...
- 百度云抢票功能怎么用 12306抢火车票攻略
-
【PConline资讯】之前我们介绍了多款抢火车票的辅助软件，这一次咱就来说一说百度浏览器出品的“云抢票功能”。百度云抢票（抢票王）功能是百度浏览器针对用户需求设计的抢火车票辅助功能，它具有“网速保...
- vue.js正确使用百度地图的方案
-
方案一：1.在index.html，加入2.在vue.config.js，配置configureWebpack:config=>{config.externals={'BM...
- SEO优化之网站怎么实现百度秒收录
-
何谓“秒收录”？大家可以经常看到，在许多大网站上，发布的新文章和外链在极短的几分钟时间内被百度索引和收录，这种现象称为“秒收”。一个网站要想关键词有排名，必须先收录！同样的一篇文章，收录快的网站，排名...
- 5分钟实现一个百度网盘资源搜索引擎，不用写代码
-
作者：msay来源：https://www.cnblogs.com/mingjiatang/p/6048193.html本文主要介绍如何通过Google的API来定义自己的搜索引擎，并将Google搜...
- 软网推荐:巧用播放器为百度网盘下载提速
-
现在国内可以选择的网络硬盘越来越少，可以选择的也只有百度网盘等极少的几家。但是百度网盘的限制也越来越多，即使是在文件下载方面也做了很多的限制，这样给用户的文件下载造成了非常大的困难。今天笔者就为大家介...
- JavaScript中10个“过时”的API，你的代码里还在用吗?
-
JavaScript作为一门不断发展的语言，其API也在持续进化。新的、更安全、更高效的API不断涌现，而一些旧的API则因为各种原因（如安全问题、性能瓶颈、设计缺陷或有了更好的替代品）被标记为“废...
- HTML5入门
-
什么是HTML5官方概念：HTML5草案的前身名为WebApplications1.0，是作为下一代互联网标准,用于取代html4与xhtml1的新一代标准版本,所以叫html5。它增加了新的标...
- 一周热门
- 最近发表
- 标签列表
-
- curseforge官网网址 (16)
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- oracle 数据导出导入 (16)
- oracle两个表 (20)
- oracle 数据库 字符集 (20)
- oracle修改端口 (15)
- 左连接 oracle (15)
- oracle 转义字符 (14)
- oracle安装补丁 (19)
- matlab归一化 (16)
- 共轭梯度法matlab (16)
- matlab化简多项式 (20)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- c语言编程小知识大全 (17)
- css class选择器用法 (25)
- css样式引入 (30)
- html5和css3新特性 (19)