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

为什么通用CSS选择器(*)会覆盖内联样式?

通用CSS选择器(*)会覆盖内联样式的原因是因为CSS选择器的优先级规则。在CSS中,选择器的优先级是根据其特定性和来源来确定的。

特定性是指选择器的具体性质,如选择器中包含的元素、类、ID等的数量和类型。来源是指选择器的定义位置,包括内联样式、嵌入式样式和外部样式表。

通用选择器(*)的特定性非常低,因为它没有任何限定条件,可以匹配任何元素。而内联样式具有较高的特定性,因为它直接应用于具体的HTML元素。

根据CSS选择器的优先级规则,特定性高的选择器会覆盖特定性低的选择器。因此,通用选择器(*)的特定性低于内联样式,所以通用选择器会覆盖内联样式。

推荐的腾讯云相关产品和产品介绍链接地址:

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

相关·内容

CSS入门总结(上)

是不是很有意思呢~~下面让们具体看看详细的语法吧~ 要想使用,我们要先知道怎样创建CSS,共有三种创建CSS的方式:外部样式表、内部样式表和内联样式表: (1)外部样式表:比较适合用在某个样式可以同时应用于好多个页面时...:blue;} (3)内联样式表:它其实是一种比较不推荐的样式表现方式,直接写在html标签中,还记得style属性吗,没错就是它,style属性可以包含任何的css属性...这个时候就有了这样一套规则:内联样式>内部样式>外部样式>浏览器默认样式 下面介绍一下选择器通用选择器:*{}(可以通用适配于所有元素);元素选择器:p{};id选择器:#tutu{}...那么优先级顺序就是这样滴: 通用选择器 < 伪元素选择器 = 元素选择器1 < 伪类选择器 = 属性选择器 = 类选择器10 < id选择器100 < 内联样式1000,还有一个捣蛋分子:!...important,它绝对是样式声明中的大哥大,有了它无论什么选择器什么创建方式都会被覆盖掉,这也就是为什么大家都说要慎用!important了。

59550

【前端】CSS : 入门

外部样式 + 内部样式 + 内联样式 可以下个结论: 优先级:内联样式>内部样式>外部样式 选择器CSS 中,选择器是一种模式,用于选择需要添加样式的元素。...猜想:后引用的选择器属性覆盖前面引用的 为了验证这个猜想,把使用顺序调换一下 class选择器-a 效果: ?...呃~~尴尬,猜想错误 继续猜想:后定义class选择器属性覆盖前面定义的 带着这个想法再来验证一下: 调换class1、class2的顺序 .class2 { color: #FFFFFF;...结论:如果有相同属性,后定义的class选择器覆盖之前定义的 (至于原因,有待指教) 标签选择器 class选择器还可以可以指定特定的HTML元素使用class 例:指定p元素颜色 p.class1...-p 效果:选择器覆盖了外部样式

97220

彻底弄懂CSS优先级规则

sunjianfeng@csxiaoyao.com 当 html 元素拥有多个 css 样式时,浏览器根据优先级规则计算 css,如果对优先级规则不够熟悉,在实际的开发过程中往往产生很多困扰,...,则会无视DOM树中的距离,若多个css平级,则后面加载的css覆盖前面的css,下方的css为平级,根据加载顺序渲染文字为紫色。..., 如 :hover{} 标签选择器, 如 span{} 伪元素选择器, 如 ::before{} 通配选择器, 如 *{} 此外,再算上内联样式(元素上的style属性)和继承的样式,可以形成优先级关系链...: 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通用选择器 > 继承的样式 2.1 demo1 — 优先级关系链应用 根据上述优先级关系链...选择器组合 & 优先级计算 所有 CSS 的选择符都为上述 7 种基础选择器或组合而成,当多个选择器组合时,首先需要计算 abcd 四个值: 【 a 】是否使用内联样式 【 b 】ID 选择器 出现的次数

1.4K246

CSS 权重

CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式覆盖前面写的样式。...important,加在样式属性值后,权重值为 10000 2、内联样式,如:style=””,权重值为1000 3、ID选择器,如:#content,权重值为100 4、类,伪类和属性选择器,如...: content、:hover 权重值为10 5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1 6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为...-- 两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000, 所以文字的最终颜色为red --> 上面的例子可以先写一个内联样式,然后再使用div标签选择器...内敛样式的div ? 此时可以看到文字已经是蓝色的了。 使用div标签选择器 ? 可以看出,div标签选择器的权重很小,所以无法设置红色覆盖蓝色。 设置权重最高的 !

2.2K20

CSS基础知识

CSS 样式 CSS样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。...1、英文圆点开头 2、其中类选器名称可以任意起名(但不要起中文噢) ID选择器 类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?...5-6 通用选择器 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色: * {color:red...h1{color:red;} span{color:red;} 层叠 层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,根据这些css样式的前后顺序来决定,处于最后面的... 最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式覆盖前面的样式

1.3K20

请避免犯这9个常见的 CSS “坏习惯”

important ,您可以覆盖样式CSS规则(从而使元素(标签)选择器覆盖选择器)。通过这种方式,标题文本的颜色将为红色,优先于类选择器设置的绿色。 h1 { color: red !...important 导致特异性战争-一种状态,其中样式开始互相覆盖,无法按照样式表的作者定义的方式工作。下一节将通过列举适当使用 !important 的实例来提供解决此问题的方法。...内联样式导致代码重复和不可重用的代码,因为每个元素都会被单独设置样式,即使它们共享相同的样式内联样式导致冗余的代码。 代码变得难以阅读,也变得臃肿。这会导致HTML文件大小增加,影响性能。...4、不使用CSS重置 不同的浏览器具有各种默认样式,这些样式不同,导致元素的外观不一致。这就是为什么我们必须定义一些样式,以便在其他浏览器上为网页样式提供一致的起点。这些样式被称为“CSS重置”。...为了使事情看起来不那么抽象,这里是一个使用通用CSS选择器(*)实现的简单CSS重置。

21710

50个有价值的CSS编写规则,让你写出更好的CSS

特定选择器的示例: section#sample-section —(问为什么需要指定“ section”和ID) main div p.title —(询问为什么需要指定.title以外的任何内容)...当嵌套和定位常见的 HTML 标签(如 、 和 标签)时,样式选择器更糟。寻找允许您有效渲染 CSS 但不要采取任何极端措施的策略。...唯一可以覆盖内联样式的是使用 !...你可能正在使用难以覆盖的第三方库;你正在使用内联样式;你对选择器过于具体;你有 CSS 层次结构或顺序问题,或者应该尝试了解 CSS 特异性是如何计算的。 10、一致地编写CSS 一致性是关键。...13 、结合通用样式 通过将具有相同样式规则的选择器分组来避免重复样式。你可以用逗号来分隔具有相同样式主体的选择器

2.3K20

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

稍微对 CSS 有点了解的同学都会知道,上面的 CSS 文件设置的样式不会生效,因为内联样式比上述 CSS 中的样式优先级要更高。 上述这种说法不是很严谨,下文细说。...内联样式的 !important 与样式表中的 !important 问题来了。 如果在内联样式中,我们也给加上 !important 怎么样呢?...important; } 此时,内联的 !important 优先级更高,文本表现为红色。 问题又来了,那如果此时我们无法修改内联样式,只能修改样式表,有办法能覆盖内掉内联的 !...神奇的事情发生了,文本的颜色变成了绿色,成功的覆盖内联的 的红色样式。 ?...这意味着在任何时候 CSS 都是取单一的 @Keyframes 的值而不会是某几个@Keyframe的混合。同时仍应注意用 @Keyframes(@规则)定义的值覆盖全部普通值,但会被 !

1.2K40

Imooc之Html与CSS

- CSS选择器 什么是选择器 选择器{ 样式; } ---- 标签选择器 标签选择器其实就是html代码中的标签。...总结:>作用于元素的第一代后代,空格作用于元素的所有后代 ---- 通用选择器 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html...中任意标签元素字体颜色全部设置为红色: * {color:red;} ---- 伪类选择符 更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式 ----...通用选择器,*{},匹配所有html的标签元素。 ---- CSS的继承、层叠和特殊性 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?...通用选择器 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素 伪类选择器 a:hover{color:red} 分组选择器 当你想为html中多个标签元素设置同一个样式

6.7K20

CSS入门8-三大特性之层叠特性与优先级

样式作用情况 元素的样式该如何去展现呢,首先看一下某个元素某个属性可能作用样式的情况: 没有指定样式(没有内联样式也没有选择器选中指定样式) 有唯一指定样式(有内联样式或者选择器选中,且只有一个规则作用于该属性...) 有多个样式规则 (有内联样式或者选择器选中,且不只一个规则作用于该属性) 下面我们来详细分析一下这三种情况。...test3.1 3.2 多个样式规则 多个样式规则冲突,其实有很多种情况。还记得我们学过样式引入方式有四种,涉及三种样式,分别是内联,内部和外部(参考CSS入门4-引入CSS)。...结论:只有内联样式,后面的属性赋值优先级大于前面的属性赋值。 3.2.1.2 仅有内部样式 内部样式,已经可以选择多种选择器来指定样式。所以,这里情况比内联会复杂很多。...important最优先(特权阶级) 比较样式文件类型,内联 > 内部 > 外部 (内外有别) 比较样式权重,按级别,个数与顺序进行计算 (亲疏有别,量大优先,后来居上) 参考 CSS的继承性、层叠性、

92630

CSS入门笔记 - 初识CSS

CSS 样式代码插入的形式来看基本可以分为以下3种: 内联css样式 嵌入式CSS样式 外部式CSS样式 4.1 - 内联css样式 内联css样式表就是把css代码直接写在现有的HTML标签中... p和.first都匹配到了p这个标签上,那么显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。...计算方法: a = 行内样式 b = id 选择器的数量 c = 类、伪类的属性选择器的数量 d = 标签选择器和伪元素选择器的数量 注意:从上到下优先级一次降低,且优先级高的样式会将优先级低的样式覆盖... 最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式覆盖前面的样式。...所以前面的css样式优先级就不难理解了: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

1.9K60

CSS的讲解

在百度百科上的解释是:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言...总结:CSS就是用来修饰网页和对网页进行排版的层叠样式表那我们为什么要学CSS呢?...接下来我们就一起看看CSS的嵌入方式一、内联样式背景颜色:#FF6633二、内嵌样式 CCS的选择器当我们要使用CSS样式的时候,首先第一步就是要去选择我们要设置的元素。那怎么去选择我们的元素呢?这里我们就要用到我们的CSS选择器了。...important >内联> id> class >标签我们讲了CSS选择器我们在讲讲CSS的字体CSS的字体在 CSS 中,有五个通用字体族:衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触

13800

cssjshtml css 优先级

因为每一个直接作用于元素的CSS规则总是接管/覆盖(take over)该元素从祖先元素继承而来的规则。 注意: 文档树中元素的接近度  对优先级没有影响。...(但是,在 :not() 内部声明的选择器影响优先级)。...给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。. 例外的 !...important: A) 一种情况 你的网站上有一个设定了全站样式CSS文件, 同时你(或是你同事)写了一些很差的内联样式。 在这种情况下,你就可以在你全局的CSS文件中写一些!...important的样式覆盖掉那些直接写在元素上的行内样式。 活生生的例子比如:一些写得很糟糕的 jQuery插件里面使用的内联样式

80030

CSS选择器的优先级

要讲CSS选择器的优先级,我们首先要知道CSS选择器有哪些?具体可以参考CSS 选择器参考手册,同时我们还需要知道CSS选择器的解析原则。请阅读为什么CSS选择器是从右往左解析。...同一级别中后写的覆盖先写的样式 如果遇到选择器组合进行比较,这时就要提到每种选择器的权重,CSS优先级的规则就是权重大的选择器优先于权重小的选择器,我们可以把选择器中如下对应等级做加法,比较权值,如果权值相同那就后面的覆盖前面的...4个等级的定义如下: 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为100。...而通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。...important的优先级是最高的,但出现冲突时则需比较”四位数“; 优先级相同时,则采用就近原则,选择最后出现的样式; 继承得来的属性,其优先级最低; 建议:css选择器使用强烈建议采用低权重原则,利于充分发挥

88640

CSS基础

介绍css相关知识 和 非布局属性。 css:Cascading Style Sheet 层叠样式表,简而言之 就是css样式 是可以叠加的。...默认 是根据css选择器的权重,按权重进行叠加,权重值大的css 覆盖 权重小的css。 基本规则 选择器{ 属性:值; 属性:值; } * 选择器作用:用来匹配html元素。...伪元素选择器 ::before{} * 组合选择器 [type=checkbox] + label{} * 否定选择器 :not(.link){} * 通用选择器 *{} 伪元素 常见的有:before...而'~'选择器则表示某元素后所有同级的指定元素,强调所有的。 * !important优先级最高 属性值 写上 '!important', 它就是最重要的 不会被其它css样式覆盖掉....* 内联的style 优先级高于 (外部样式表 和 style标签中的样式),也高于 id选择器 * 相同权重 后写的生效

42820

谈谈CSS中一些比较偏门的小知识 前面我写了:谈谈html中一些比较偏门的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

3.页面导入样式,@import和link的区别: 当然,我们现在一般引入css文件用的是link。...优先级: 就近原则,同权重情况下,样式定义最近者为准;(三种方法引入css内联,内部.........,外部引用) 载入样式以最后定义的为准(产生覆盖)。 优先级为: !important>id>class>tag;important比内联优先级高。...关于display:inline-block;可点击此处查看 8.CSS选择器: id选择器(#test) 类选择器(.test) 标签选择器(h1,p,div) 相邻兄弟选择器(div+p) 子选择器.../*权重为:10+1+1=12*/ .test p a{}   ps:如果权重相同,那么会后面定义的样式覆盖前面的,尽量避免这种情况。

1.3K60

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券