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

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

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

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

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

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

腾讯云CSS CDN：https://cloud.tencent.com/product/css-cdn
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云云安全中心：https://cloud.tencent.com/product/ssc

相关·内容

CSS同级别选择器样式覆盖机制

CSS的选择器样式的覆盖机制如在dom元素中声明： helloworld // fail .second{...helloworld // fail .first{ color: blue; } .second{ color: red; } 所以 CSS

1.2K4 0

CSS入门总结(上)

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

5955 0

【前端】CSS : 入门

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

9722 0

彻底弄懂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.4K24 6

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.2K2 0

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.3K2 0

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

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

2171 0

CSS的优先级

会影响优先级。...下面引用 MDN 文档中建议的经验： - 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !...important 覆盖内联样式在团队协作中，有他人的代码使用了内联样式，而需要去覆盖的时候。或者在使用一些库或者框架的代码时，有一些样式写在了内联样式中。...在这种情况下，你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。... /* 覆盖内联样式 */ .foo[style*="color: red"] { color: firebrick !important; } 我们可以通过这种方式来覆盖内联样式。

7931 0

CSS选择器及优先级总结

important 会覆盖页面内任何位置定义的元素样式。作为style属性写在元素内的样式 id选择器类选择器 元素选择器 通配符选择器 浏览器自定义或继承总结排序：!...important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性同一级别 (1) 同一级别中后写的会覆盖先写的样式 (2) 同一级别css引入方式不同...，优先级不同总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。...说明css引入方式优先级：内部样式表 > 外部样式表例2、内部样式表 > 外部样式表二、选择器 1、普通选择器 选择器 eg 描述通用选择器 * * 选择所有元素。

5472 0

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

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

2.3K2 0

深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

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

1.2K4 0

Imooc之Html与CSS

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

6.7K2 0

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

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

9263 0

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.9K6 0

浅谈 CSS 的用法

1.1.2 CSS 的定义 选择器 { 属性：值；属性：值；属性：值；} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。...div{ width:100px; height:100px; background:gold; } 1.2 CSS 与 HTML 的连接方式 1.2.1 内联样式示例...，一般用来做一些通用设置，或用在层级选择器中。...示例 div { 属性:值 ··· } 注意 ① 使用元素选择器该元素将全部应用该样式 ② 元素选择器等级最低可被 id、类选择器覆盖 1.3.2 类选择器 通过类名来选择元素...示例 .name { 属性:值 ··· } 注意 ① class可以重名 ② 类选择器会被id选择器覆盖 1.3.3 id

1.5K4 0

CSS的讲解

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

1380 0

cssjshtml css 优先级

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

8003 0

CSS选择器的优先级

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

8864 0

CSS基础

4282 0

谈谈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.3K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云