首页
学习
活动
专区
工具
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选择器是如何确定优先级的?

先看下面的示例 id="content"> id="title">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

3.CSS优先级-CSS进阶

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

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

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

    1.3K40

    CSS三大特性

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

    72840

    CSS编写规范

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

    2.7K30

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

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

    2K100

    HTML第二课——css【2】

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

    54490

    CSS基础-CSS选择器:ID、Class、Tag

    CSS(Cascading Style Sheets,层叠样式表)是网页设计中用于控制布局和外观的强大工具。选择器是CSS的核心,它允许我们精确地定位HTML元素并应用样式。...ID选择器 作用与特点 ID选择器通过元素的id属性来选择唯一的元素,每个ID在文档中应该是唯一的。ID选择器具有最高的优先级,常用于页面中特定且唯一的元素。...对于样式,优先考虑使用Class选择器。 问题:ID选择器权重过高,影响样式覆盖。ID选择器的高优先级可能导致后续样式难以覆盖。...Class、Tag选择器是CSS基础中的三大支柱,理解它们的特点和适用场景对于编写高效、可维护的CSS代码至关重要。...记住,虽然ID选择器具有最高优先级,但并不意味着应该频繁使用;相反,应更多依赖于Class选择器来实现灵活多变的样式设计。

    1.1K10

    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选择器,这两个选择器之间不能有空格;

    67940

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

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

    42820

    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应该按需使用,而不能滥用。

    81650

    HTML CSS 入门

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

    5.2K20

    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.8K00

    初识CSS3

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

    78080

    CSS的优先级

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

    81010

    CSS 三大特性

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

    53120

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

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

    51540

    CSS入门?一篇就够了!

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

    5.2K20
    领券