首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css规范不让用id选择器的优先级是【必须】是怎么考虑的?

在CSS规范中,不建议使用ID选择器,因为ID选择器具有较高的优先级,这可能导致样式覆盖的问题。ID选择器的优先级高于类选择器、属性选择器和标签选择器。因此,如果在样式表中使用ID选择器,可能会导致其他元素的样式被意外地覆盖。

为了避免这种情况,CSS规范建议使用类选择器来代替ID选择器。类选择器具有较低的优先级,因此更容易被其他选择器覆盖。此外,使用类选择器还可以使代码更具可重用性和可维护性。

例如,如果要为一个段落元素设置样式,可以使用类选择器来代替ID选择器,如下所示:

代码语言:css
复制
.paragraph {
  font-size: 16px;
  color: #333;
}

而不是:

代码语言:css
复制
#paragraph {
  font-size: 16px;
  color: #333;
}

总之,为了避免样式覆盖的问题,CSS规范建议使用类选择器来代替ID选择器。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS选择器如何确定优先级?

先看下面的示例 Hello world 有如下2个css选择器 #title { color: red;...这就涉及到了css选择器优先级积分规则 css选择器设置了4个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越 可以把它看成一个4位数:0.0.0.0,数值越大优先级越高...例如: 0.1.0.0 > 0.0.1.2 各种选择器具体分值 行内样式(style属性定义样式) 1,0,0,0 ID选择器(#ID) 0,1,0,0 类选择器(.classname...0,0,0,0 示例 (1)ul#nav li.active a 包含3个元素选择器,1个ID选择器,1个类选择器 0,0,0,3 0,1,0,0 0,0,1,0 各位相加后,结果为 0,1,1,3 (...2)#footer *:not(nav) li 包含1个ID选择器,1个通用元素选择器,一个伪类:not选择器,2个元素选择器 0,1,0,0 0,0,0,0 0,0,0,0 0,0,0,2 各位相加后

1.1K100

深入理解 CSS(Cascading Style Sheets)中层叠(Cascading)

通常我们聊到 CSS 规则优先级,第一时间都会想到这个表,也就是给不同 CSS 规则赋予不同权重: 一个选择器优先级可以说是由四个部分相加 (分量),可以认为 个十百千 四位数四个位数: 千位...这样声明没有选择器,所以它得分总是1000 百位: 选择器中包含ID选择器则该位得一分 十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分 个位:选择器中包含元素、伪元素选择器则该位得一分...总的来说是规则是: 内联 > id 选择器 > 类/属性/伪类选择器 > 标签元素/伪元素 上面的规则没有问题。...但是,注意,这里仅仅考虑页面作者定义样式优先级。首先,它并且没有包含 !important 规则。 其次,对于决定一个 CSS 样式最终表现而言,还有非常重要另外一个概念 -- 层叠。...CSS 选择器层叠(级联)顺序 上面说常见优先级误区,仅仅是规定了网页作者定义样式优先级。除此之外,CSS 优先级还需要考虑选择器层叠(级联)顺序。

1.2K40

3.CSS优先级-CSS进阶

::before ::after ::first-letter ::first-line 常见伪类: :hover :first-child Ⅰ.常用选择器优先级 行内样式 > id选择器 >...在继承样式中,我们不能用选择器权重这一套东西来计算。进而总结如下: Ⅱ.总结 在CSS中,选择器权重计算只针对指定样式(当前元素),并不能用于继承样式。...Ⅱ.总结 对于样式冲突,我们不能笼统地权重值来计算。 在CSS中,选择器权重值计算只针对指定样式(当前元素),并不能用于继承样式继承样式和指定样式发生神突时,指定样式获胜。...因为在优先级相同情况下,后面定义会覆盖之前。(后来者居上原则) ②使用更高优先级选择器,再添加一条!importantcss语句 使用!...(4)实际开发 在实际开发过程中,我们经常会遇到写在后面的被写在前面的样式覆盖了,这时就应该考虑一下是否CSS优先级引发问题。 了解CSS优先级规则,能够为我们提高不少开发效率。

51821

CSS三大特性

CSS 三大特性 层叠 继承 优先级 我们学习CSS 必须掌握三个特性。 CSS层叠性 所谓层叠性指多种CSS样式叠加。...CSS特殊性(Specificity) 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS优先级一个标准 具体规范入如下...: specificity一个四位数 字串(CSS2三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。...总结优先级: 1. 使用了 !important声明规则。 2. 内嵌在 HTML 元素 style属性里面的声明。 3. 使用了 ID 选择器规则。 4....总结:权重优先级算法,层叠优先级表现

69040

CSS编写规范

style标签定义样式(嵌入式),而由于行内样式与style标签定义样式优先级比以CSS文件引入样式(外部样式表)优先级要高: 导致无法被以简单选择器样式覆盖 导致以jsaddClass来添加简单类选择器样式优先级低而无无法起作用...不便于交接 4)不合理使用CSS选择器(组合、属性选择器)和id选择器 导致无法被以简单选择器样式覆盖 导致以jsaddClass来添加简单类选择器样式优先级低而无无法起作用 不便于交接 当然...5、表现与结构分离:CSS样式都应写在CSS文件中,且尽量少用id、组合、属性选择器和行内样式以及style标签样式 为避免在CSS文件使用类选择器和使用js添加类选择器进行样式覆盖时因优先级问题而无法覆盖成功...输入时候少按一个shift键; 浏览器兼容问题 (比如使用_tips选择器命名,在IE6 无效) 能良好区分JavaScript变量命名(JS变量命名“_”) ③用字母、_号、-号、数字组成...6)不要随意使用id id在JS唯一,不能多次使用,而使用class类选择器却可以重复使用,另外id优先级优先于class,所以id应该按需使用,而不能滥用。

2.6K30

《小白HTML5成长之路31》半透明背景自定义弹窗怎么CSS布局

于是小白也准备自己通过css布局一个弹窗试试,一来以后肯定会用上这个功能,二来熟悉一下最近掌握CSS+HTML布局。 说干就干,小白打开webStrom做起了弹窗布局。...,于是小白先把layer和dialog以及dialog内部容器设定了一个初步CSS样式。 layerposition设置为fixed,上下左右距离都设置成0,就可以达到占用整个窗口。...里面的dialog容器小白根据刚学习CSS溢出法让dialog上下都居中。...dialog如果绝对定位,设置上下左右距离都为0它会占用整个父容器区域,但是如果CSS中限制了dialog宽和高并且设置了marin为auto,它就会基于父容器居中。...正好这时老朱从小白身边经过,随口跟小白说了一句:“小白,你是不是把窗口父容器设置成半透明了?” “啊!父容器背景黑色,所以我把父容器设置成了半透明!”

1.9K100

HTML第二课——css【2】

大家看了以后就知道,答案肯定。那么我们现在想让两个div样式不一样,该怎么写呢?此时我们就需要对两个div有所区分,上面css文件中选择器叫做标签选择器,所以只要是div标签都会适用于对应样式。...现在要区别设置,就涉及到标签选择器了: id选择器 所有的可视化基本都有id属性,id英文全名为identity意为唯一标识,所以id必须唯一。...所以id选择器优先级要高于class选择器。 混合选择器 先说明一下,以后我们要用混合选择器混合选择器混合选择器。...选择器优先级id ->混合选择器->class选择器->标签选择器 现在我们修改html <!...答案:idmodule-body下一层idbrand-mask下一层identerspan标签。

52090

你了解 JSX,那你了解 StyleX 么?

JSX一种「JS描述HTML」语法规范,广泛应用于前端框架中(比如React、SolidJS...),由Meta公司提出。...同样,按照Meta设想,StyleX一种「JS描述CSS语法规范。...相比其他CSS-in-JS优势 首先要明确,stylex虽然以CSS-in-JS形式存在,但本质上他一种「JS描述CSS规范」。文章开头也提到,他定位类似JSX。...既然规范,那他就不是对CSS简单封装、增强,而是一套「自定义样式编写规范」,只不过这套规范最终会被编译为CSS。...当这样选择器多了后,很可能会在开发者不知道情况下改变某些后代元素样式。 遇到这种情况我们一般会怎么处理呢?正确选择当然找到上述影响后代选择器,再修改他。

27720

CSS基础知识(一)

因此CSS也有自己语法结构; CSS规则由两部分构成,选择器和声明,声明必须放在大括号中{},可以是一条或多条; 每条声明由一个属性和值组成,属性和值冒号分开,每条语句以英文分好结尾; # h1表示选择器...,那我们要怎么做呢; p{ font-size:12px; } h1{ font-size:16px; } 需要注意,一个HTML页面会有很多 标签和 标签,标签选择器一旦声明...,必须符合CSS规范,它语法如下; # .class1为类选择器名字 # font-size为属性 # 12px为属性值 .class1{ font-size:12px; } 和标签选择器不同,...,所以就存在优先级问题; 选择器优先级为:标签选择器>ID选择器>类选择器; 样式优先级:行内样式>内部样式>外部样式; 八、CSS复合选择器 由标签选择器、类选择器ID选择器三种基本选择器为基础...>处处闻啼鸟 后代选择器: 交集选择器由两个选择器直接连接构成,其中第一个必须标记选择器,第二个必须类别选择器或者ID选择器,这两个选择器之间不能有空格;

64640

HTML+CSS规范

文章目录 前言 一、html规范 1.块级元素 2.行内元素 二、CSS规范 1.命名空间规范(了解) 2.CSS书写顺序 3.CSS书写规范 4.去掉小数点前“0” 5.连字符CSS选择器命名规范...6.字符小写 7.选择器 8.代码注释 9.不要随意使用ID 10.为选择器添加状态前缀 11.CSS命名规范(规则) ---- 前言 HTML+CSS规范】 个人主页:@MIKE笔记 来自专栏...书写规范 使用CSS缩写属性 CSS有些属性可以缩写,比如padding,margin,font等等,这样精简代码同时又能提高用户阅读体验。...输入时候少按一个shift键; 浏览器兼容问题 (比如使用_tips选择器命名,在IE6无效) 能良好区分JavaScript变量命名(JS变量命名“_”) 6.字符小写 定义选择器名...9.不要随意使用ID id在JS唯一,不能多次使用,而使用class类选择器却可以重复使用,另外id优先级优先与class,所以id应该按需使用,而不能滥用。

72350

HTML CSS 入门

例如,插入图片时,必须使用 src (source)属性来提供图像位置: 考虑到 标签意义,强制性要求设置显示图像路径...(类似于书目录和对应内容一样) 另外你可以提炼一些通用属性来减少描述: 简而言之:更易维护、更灵活。不过应该怎么描述相当看经验。...这就是 CSS 优先级。 在我们示例中,该段落将为**红色,**因为#id选择器比其他选择器具有更高优先级。...p{ color: green;} p{ color: red;} /* Paragraphs will be red */ 快速判断方法 判断 CSS 优先级一种快速方法选择器打分: #id...因为 #introduction{ color: red;} ID 选择器具有更高优先级。 如何避免冲突 在编写CSS时,很容易编写有冲突规则,比如多次应用同一属性。

5.1K20

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值冒号分开,每条语句英文冒号分开    注意:       ...css最后一条声明,用以结束“;”可写可不写,但是基于W3c标准规范思考建议最后一条声明结束“;”都要写上 2.行内样式    直接在style属性设置css样式style属性提供了一种改变所有的...网页,这样会给用户不好感觉这也是目前大多数网站连接外部样式表主要原因 5.样式优先级:  行内元素>内部样式表>外部样式表 注:代码逐条执行,如果内部样式比外部样式先声明,则外部样式具有优先级...6.css3选择器    标签选择器选择器id选择器  1)类选择器选择器即标签内容 .green{  font-size:20px;...">hhhh   注意:id选择器只能使用一次,也就是说在同一页面同一个id属性只能设置一次;而类选择器可以在页面使用多次  3)选择器优先级   id选择器>class类选择器>标签选择器

74580

CSS优先级

CSS优先级也叫做特异性,浏览器使用它来判断在元素上使用何种属性,优先级基于不同选择器组合而成匹配规则。...选择器优先级 下面罗列选择器选择器优先级递增: 1、类型选择器(例如:h1)和伪元素选择器(例如:::after) 2、类选择器(例如: .example),属性选择器(例如:[type=...important 规则声明被应用到相同元素上时,拥有更大优先级声明将会被采用。 下面引用 MDN 文档中建议经验: - 一定要优化考虑使用样式规则优先级来解决问题而不是 !...span { color: blue; } span { color: red; } 在上面的代码中,不论 CSS 语句顺序怎样,文本都会是绿色,因为 ID选择器优先级最高。...如果你已经碰到了最高优先级 ID 选择器,该怎么办呢,有个 hack 方法,可以复制简单选择器,以增加优先级,就好比在优先级计算中做加法,例如下面的代码: /* 复制简单选择器,以增加特异性

77510

CSS 三大特性

考虑权重时,初学者还需要注意一些特殊情况,具体如下: 继承样式权重为0。...CSS特殊性(Specificity) 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS优先级一个标准 具体规范入如下...: specificity一个四位数 字串(CSS2三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。...继承 权重 0 总结优先级: 使用了 !important声明规则。 内嵌在 HTML 元素 style属性里面的声明。 使用了 ID 选择器规则。...总结:权重优先级算法,层叠优先级表现

50120

Web前端进阶高薪必会54个CSS重难点知识梳理(1)

因为涉及内容较多,我分5篇内容发出来,好逐一进行让大家消化这些内容,本次我把前1-12个CSS重难点整理出来,具体内容如下: CSS选择器优先级 CSS中可继承与不可继承属性有哪些 display...1、CSS选择器优先级 选择器 优先级权重 等级 实例 !important 10000 一等 a{color:red !...;}ul>li{color:red;} 继承样式没有权值 CSS选择器优先级比较规则 上面我们把选择器分为了 6 个等级,那么选择器在比较时,也是按等级逐个来比较。...important 作用是提升优先级。换句话说,加了这句样式优先级最高(比行间样式优先级还高),不过这种方式基本不用,因为不利于 css 样式重写和 js 对样式操作。...在 CSS 中,可替换元素(replaced element)展现效果不是由 CSS 来控制。这些元素一种外部对象,它们外观渲染,独立于 CSS

1.7K00

前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS三种引入方式 选择器 伪类、伪元素选择器速查 CSS选择器优先级***** 选择器相同情况下 选择器不同情况下...red; } CSS三种引入方式 文件导入式(项目规范推荐使用) 在head标签中style标签里书写 嵌入式/行内式(标签上直接写,最不推荐使用) 1.文件导入式(最规范形式) <link rel...,不多) *{ color: red; } /* ######### 后代选择器 ########## */ (空格)后代选择器(div下面的span、div下pspan) div...这里要放个表格,整理出来方便快速查找 CSS选择器优先级***** 参考:优先级如何计算?...(篇幅不长,案例也十分简明,可以完全不看下面的内容) 后期添加样式,很多样式不生效原因可能就是没有注意优先级 选择器相同情况下 就近原则 选择器不同情况下 优先级: style > id选择器

48940

CSS入门?一篇就够了!

选择标签 这就用到基础选择器组: CSS基础选择器 标签选择器(元素选择器) 标签选择器指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一CSS样式。...并集选择器 并集选择器CSS选择器分组)各个选择器通过逗号连接而成,任何形式选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器一部分。...层叠 继承 优先级 我们学习CSS 必须掌握三个特性。...CSS特殊性(Specificity) 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS优先级一个标准 具体规范入如下...继承 权重 0 总结优先级: 使用了 !important声明规则。 内嵌在 HTML 元素 style属性里面的声明。 使用了 ID 选择器规则。

4.9K20
领券