【图文】CSS选择器优先级

最新推荐文章于 2024-03-09 00:00:00 发布
最新推荐文章于 2024-03-09 00:00:00 发布
阅读量146 收藏 1
点赞数
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq846294282/article/details/121013394
版权

最近面试人，让我想起来了多年前的一个CSS选择器优先级问题，于是去MDN翻了文档，找到一个十分形象的图片解析，如下：
CSS优先级鱼群

图片解析

  • 外部样式
    • 优先级有三位数字，从左到右，第一位是id选择器的数量，第二位是class选择器+属性选择器+伪类选择器的数量，第三位是元素选择器+伪元素选择器的数量
  • 内联样式
    • 优先级会在外部样式的基础上，在最左侧加一位1（这也就是内联样式优先级总是高于外部样式的原因）
  • !important
    • 优先级会在内联样式的基础上，在最左侧再加一位1（这也就是!important优先级总是高于其他任何样式的原因）
Coder Ben
关注
专栏目录
css 首个元素,类的第一个元素的CSS选择器
weixin_29306571的博客
08-03 6501
小编典典这是作者误解:first-child工作方式的最著名例子之一。在CSS2介绍，该:first-child伪类表示其父的第一个孩子。而已。有一个非常普遍的误解，认为它选择第一个与其余复合选择器指定的条件相匹配的子元素。由于选择器的工作方式(请参阅此处以获取解释)，这根本不是事实。选择器级别3引入了一个:first-of-type伪类，该伪类表示其元素类型的同级元素中的第一个元素。该答案通过插...
【CSS】选择器、优先级、颜色 尺寸 图片表示方法等
南栀的博客
04-15 1701
文章目录CSS：层叠样式表1、结构和表现分离2、应用CSS的方法（1）页面嵌入式（2）行内嵌入式（3）先创建独立的样式文件(.css)，然后在页面中导入这个样式文件3、CSS的样式规则4、CSS选择器：CSS核心（1）标签名选择器（2）id选择器（3）类选择器5、CSS中颜色表示方式6、CSS中尺寸表示方式7、CSS中图像表示方式 CSS：层叠样式表 1、结构和表现分离 html标签只负责展示内容，搭建网页的基本结构，不用标签的属性设置样式。 所有的样式由CSS来进行设置。 2、应用CSS的方法 （1）
一张图搞定CSS选择器的优先级
weixin_45575944的博客
09-08 320
系统地流程化地解决样式冲突
css:first-child和first-of-type
小瑾沐晚风的博客
08-24 1658
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。 first-child:选择器用于选取属于其父元素的首个子元素的指定选择器 first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素 nth-of-type(x):选择器匹配属于其父元素的特定类型的第x个子元素的每个元素 话不多说，先上代码： <div>
css中选取子元素
生存不忘生活
08-08 5870
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
详解CSS选择器的优先级
最新发布
大剑师兰特的GIS世界
03-09 545
在CSS中，选择器的优先级由四个级别和各级别的出现次数决定。这四个级别分别为：**`行内选择符、ID选择符、类别选择符、元素选择符，优先级依次降低`**。
CSS选择器的权重及优先级
杜小白的博客
03-06 2448
最近在牛客网上刷题遇到过各类选择器优先级的比较问题，经查阅，现总结如下：总体来说：内联样式 &gt; id&gt;class=属性选择器=伪类选择器=伪元素选择器&gt;标签，大致分为四个等级：一等：代表内联样式，如: style=””，权值为1000；二等：代表ID选择器，如：#content，权值为100；三等：代表类，伪类和属性选择器，如.content，权值为10；四等：代表类型选择器和伪...
CSS基础教程：选择器、盒模型与HTML结合方式
这是一份关于CSS基础知识的课程笔记，涵盖了HTML与CSS的结合方式、CSS选择器、盒子模型以及布局技术等内容。以下是笔记的关键知识点： 1. HTML基础操作思想：通过使用标签包裹数据，并通过修改标签属性来改变样式。...
css笔记课程笔记2019，5，22
05-22
3、css的基本选择器（三种） ** 要对哪个标签里面的数据进行操作 （1）标签选择器 * 使用标签名作为选择器的名称 div { background-color:gray; color:white; } （2）class选择器 * 每个html标签都...
CSS20200516.zip
05-16
综上所述，这个压缩包提供的材料涵盖了从基础到进阶的CSS概念，包括布局、定位、选择器优先级、盒子模型以及HTML与CSS的结合方式，是全面学习和实践CSS的好资源。通过这些文件，学习者可以逐步掌握构建响应式和交互...
css系列之浮动博客源码
09-10
1. CSS选择器：如类选择器（.class）、ID选择器（#id）以及伪元素选择器（::before, ::after）等。 2. CSS盒模型：包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，它们共同决定了元素的尺寸和...
CSS入门教程：图文混排与样式规则解析
"这篇资源主要介绍了CSS在网页设计中的应用，包括图文混排的基本概念以及CSS的相关知识，如属性设置、调用方式、优先级、类与ID选择器，以及组合注释、字体和颜色背景属性等。" CSS，全称层叠样式表（Cascade ...
CSS-定位
z_Ever1的博客
10-26 283
定位              *{             margin: 0;             padding: 0;         }         div{             width: 100px;             height: 200px;             background-color: skyblue;         }
【CSS】font-weight设置为500显示不出加粗效果
Coder Ben's Writing
09-14 5662
Windows 系统默认的宋体(simsun) 没有那么多级别。在缺少级别支持的前提下，CSS 会根据回退机制寻找一个类似的精度，结果就变成了400 (Normal)。
改变select和option的默认样式
Coder Ben's Writing
04-15 4179
select { border: solid 1px #000; appearance:none; -moz-appearance:none; -webkit-appearance:none; padding-right: 14px; padding-left: 20px; background: url("http://ourjs.git...
flex布局，实现子元素在主轴上单独排列
Coder Ben's Writing
02-05 4005
flex布局中，是通过在容器上设置justify-content属性来规定子元素在容器中主轴上的排列方式 而如果要单独设置子元素的排列方式，则可以通过子元素的margin属性实现，例如： .container { display: flex; justify-content: space-between; } .item2 { margin-left: 10px; margin-right: auto; } 就实现了container下item2子元素单独靠左排列（且距离左侧10px），其他子元
【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应
Coder Ben's Writing
12-20 3791
做了一道猫厂很经典的前端笔试题，解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px，左侧content自适应。 本来直接用float，发现aside总是会被“挤”到content以下，footer以上的位置，debug了好久最终还是看了大牛的博客才弄明白。 基本思路是： ①content宽度不设，让它默认auto，设一下高度（好看） ②a
【前端攻城狮之路】手把手教你用CSS画三角形（百度15前端研发笔试卷）
Coder Ben's Writing
12-26 840
[问答题] 题目描述 请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为： 实现思路 1、先思考一个问题：border-width比较大时，它的四个边框是如何划分的？答案是 ” 等面积划分 “ ，如下： （四个全等梯形） 2、进一步考虑，把div的width和height都设为0，即只要边框，那么它显示的结果就是这样
【前端攻城狮之路】九宫格
Coder Ben's Writing
11-25 772
CSS盒子模型及定位练习——九宫格 一些问题先放这（欢迎留言谈论）： 1。屏幕比例非100%、%200、%300...时，grid_wrapper右下方出现间隙（将其border注释去掉可查看此问题）。 2。未理解margin-left和margin-top先设5px再设-5px的原理 实现代码如下： /*CSS File of NineGrid*/ body{ mar
定制Android滚动选择器实现图文效果源码
本文档详细介绍了如何在Android应用开发中实现一个自定义滚动选择器（PickerScrollView），用于模拟图片滚动效果。该组件是基于`View`类进行扩展，由`com.linzihui.widget.PickerScrollView`类定义，其主要功能是为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coder Ben

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值