为什么:link伪类打破了预期的CSS特异性规则？

在CSS中，伪类是一种特殊类型的选择器，用于选择特定状态下的元素。:link伪类用于选择尚未访问的链接。伪类的特异性规则是基于CSS的继承和层叠规则，它们决定了哪些样式应用于元素。

在某些情况下，:link伪类可能会打破预期的CSS特异性规则。这可能是因为:link伪类的特异性规则与其他选择器的特异性规则不同。例如，:link伪类的特异性规则可能比其他选择器的特异性规则更高，导致:link伪类的样式覆盖了其他选择器的样式。

为了避免这种情况，可以使用更具体的选择器来覆盖:link伪类的样式。例如，可以使用类选择器或ID选择器来覆盖:link伪类的样式。此外，也可以使用!important关键字来强制覆盖:link伪类的样式。

总之，:link伪类可能会打破预期的CSS特异性规则，因为它的特异性规则与其他选择器的特异性规则不同。为了避免这种情况，可以使用更具体的选择器或!important关键字来覆盖:link伪类的样式。

相关·内容

《精通CSS》第2章添加样式

如果你好奇为什么有相邻同辈选择器和一般同辈选择器，却没有可以选择前面的元素的选择器？原因如下：浏览器之所以不支持向前选择同辈元素，主要是因为网页渲染性能的关系。...到这里，我们总览了一下 CSS 选择器，如果你对其中细节已经了解，那就跳过第一节，直接前往 2.2 层叠。不跳过的同学，我们继续属性选择符、伪元素和伪类。...最常规的区分伪类和伪元素的方法是：实现伪类的效果可以通过添加类来实现，但是想要实现伪元素的等价效果只能创建实际的 DOM 节点。此外就是写法上的区别，伪类是使用单冒号:，伪元素使用是双冒号::。...特殊性高的选择器会覆盖特殊性低的选择器。如果两条规则的特殊性相同，则后定义的规则优先。 2.3 特殊性特殊性，也被称作特异性或者权重，有很多叫法，我们只要知道是啥就行了。...如上行内样式的特殊性最高，然后通过 ID 选择器应用的规则高于其他选择器应用的规则，通过类选择器应用的规则高于类型选择器应用的规则。

1.5K4 0

Chrome 99新特性：@layers 规则浅析

b = 2, c = 0 */ color: green; } 这样就会出现 .card 中的 link 样式被 .post 中的 link 样式覆盖的问题，不符合预期目前可能会比较常见使用 BEM...属性选择器伪类选择器元素(类型)选择器伪元素选择器= 其中权重最高的选择器= 1 B + 其中权重最高的选择器= 0 「举例」 #root.link [hidden] :hoverbutton...即将推出的 CSS Cascading and Inheritance: Cascade Layers 致力于通过将 CSS 分层的方式避免预期外的样式覆盖，并提供更好的 CSS 组织结构。...那么根据我们的选择器权重理论：第一行，命中 2 个，颜色冲突，特异性相同，后声明样式优先，加粗绿色第二行，命中 3 个，颜色冲突，.link 特异性高优先，加粗蓝色第二行，命中 4 个，颜色冲突，....link, .pink 特异性高优先，.pink 后声明优先，加粗粉色添加 layer 后的样式如果我们按照不同的来源将样式分层，会发现 .link 变为了绿色...

9731 0

CSS :where 和 :is 伪类函数是什么？

:is() 和 :where() 都是伪类函数，可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组（id，类，标签等），并选择可以在该列表中选择的任何元素。...:where() 是简单的，其特异性总是为0，而 :is() 的特异性为最强的选择器。什么是CSS特异性（简而言之）？在CSS中有四个层次的特异性层次。...哪个选择器的数量最多，哪个元素的样式就会被应用到该元素上，这就是为什么有时当你写CSS时，你的样式不会被应用，会在开发工具中显示为划线。...特异性等级评分 ID——特异性得分为 100 内联样式——特异性得分为 1000 元素和伪类——特异性得分为 1 类、伪类和属性——特异性得分为 10 例如 button.btn { color:...正如你所看到的，有两种不同的专属性级别的伪类，这是因为不同的伪类可能具有不同的专属性，这取决于你使用的伪类以及如何使用它们。

5822 0

超链接的lvha原则

（first-child），以及CSS3新增的身为根元素的元素（root）和一大堆的结构化伪类（nth-*，*-of-type等等）伪元素更像元素一些，用来选择DOM树上本不存在的元素（或某个元素的一部分...比起伪类的繁荣大家族，伪元素就显得有些伶仃了，到目前（2017/11/4）为止，CSS3规范中仍然只有4个伪元素（CSS2.1就是4个）：首字母：选择元素包含的文本内容的首字母（文本内容包含来自子元素的...CSS3选择器的更多信息，请查看CSS选择器分类总结三.a标签的6种状态 lvfha伪类给超链接提供了5种状态，第6种是指锚点，而不是超链接 link伪类存在的意义之一就是把超链接与锚点区分开，link...，让层叠结果符合样式表编写者的预期。...所以lvha应用更广（实际上组合伪类的语义更明确，没有“隐藏的奇怪规则”）另外，可以层叠规则来实现特殊效果，例如： // 用lhva实现只有未访问的链接才有hover效果 a:link {} a:hover

3.4K3 0

css超链接样式

2、如何定义超链接伪类在CSS中，我们使用超链接伪类来定义超链接在不同时期的不同样式。...语法： a:link{CSS样式} a:visited{CSS样式} a:hover{CSS样式} a:actived{CSS样式} 说明：表1 使用伪类定义动态超链接属性说明 a:link...没关系，对于掌握俺有一个挺好的方法。“love hate”，看到了么，这样就记住了。我们把超链接伪类的顺序规则称为“爱恨原则”。大家以后写代码的时候想起“爱恨原则”，自然而然就写出来了。...在此学习了CSS超链接伪类，我们可以使用CSS伪类向文本链接添加复杂而多样的样式。 3、深入了解超链接伪类大家可能开始有疑问了，是不是每一个超链接都必须要定义4种状态的样式呢？答案是否定的。...这个问题是新手经常问到的问题，其实这是W3C官方规定的，也许官方的思维跟我们的不一样。规则这种东西嘛，一般都是官方定的，就像交通规则一样，我们只需要遵守就行了，没必要纠结为什么绿灯走而红灯停。

2.1K4 0

link和@import引入css 区别，不建议使用@import

用法区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel等属性。 2....加载顺序区别加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 会等到页面全部被下载完再被加载。该规则必须在样式表头部最先声明。...> @import url('b.css'); LINK嵌套@import a.css 通过LINK插入到页面中，然后a.css 通过@import规则来引入b.css: // 这种方式同样阻止并行加载代码...="stylesheet" type="text/css"> //proxy.css的代码: @import url('b.css'); 多个@imports IE中使用@import会引起资源被按照一个不同于预期的顺序下载...important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符为了便于理解权重的计算方式，我们按以下方式进行数值假设分析：选择器权重通配符 0 标签 1 类/伪类

2.7K1 0

CSS 2020 Level 4：缩短选择器长度的新伪类

在编写CSS时，你有时会用很长的选择器列表来针对多个元素的相同样式规则。例如，如果你想对一个标题元素内的任何标签进行颜色调整，你可以这样写。...在这篇文章中，你会了解到这两个功能性伪选择器的语法和价值。浏览器支持情况： Chromium（>=88）、Firefox（>=78）和Safari（>=14）都支持:is 和:where伪类。...初识 :is() 和 :where() 这些都是功能性的伪类选择器，注意末尾的()和它们以:开头的方式。可以把它们看作是运行时的动态函数调用，与元素相匹配。...在编写CSS时，它们为你提供了一种在选择器的中间、开头或结尾将元素分组的方法。它们还可以改变特异性，让你有权力取消或增加特异性。...uppercase; } /* nested */ .hero:is(h1,h2,:is(.header,.boldest)) { font-weight: 900; } 上述每个选择器例子都展示了这两个功能伪类的灵活性

8476 1

26 个 CSS 面试的高频考点助力金三银四

一个样式规则由三部分组成：选择器–选择器是 HTML 标记，用于选择要设置样式的内容。它根据其ID，类和名称选择 HTML元素。属性–属性是 HTML 标签的一种属性。...p> 外部:在工作空间中创建单独的CSS文件，然后在创建的每个web页面中链接它们 <link rel=”text/css”href=”your_CSS_file_location”/...CSS 中有四类可以授权选择器的特异性级别：内联样式 ID 类，属性和伪类元素和伪元素问题12：CSS有什么缺点 CSS的缺点有: 版本太多 – 与HTML或Javascript等其他参数相比，...问题 20：如何在CSS中定义一个伪类?它们是用来干什么的 CSS伪类是用来添加一些选择器的特殊效果。...伪类的语法 selector:pseudo-class{property:value;} 问题 21：CSS和SCSS有什么区别？

1.9K2 0

大多数开发人员无法通过这个简单的CSS面试问题(CSS特异性)

你也对CSS特异性有着扎实的理解。事例地址：https://codepen.io/ambroseliew/pen/jOpzXpj 为什么？...如果你没有找到正确答案或者不明白为什么文本颜色是红色的，你可以查看这篇其他文章，在这里我详细讲解了CSS的特异性。...这是因为它们都有1个类选择器和1个类型选择器。同时，对于应用蓝色的规则，其CSS特异性为0-0-0-1-0，因为它只有一个类选择器。...而应用绿色的规则的CSS特异性为0-0-0-0-1，因为它只有一个类型选择器。因此，具有最高CSS特异性值的规则是应用紫色的规则和应用红色的其他规则。但是有两个具有相同CSS特异性值的CSS规则！....hello.hello { color: pink; } 是的，你可以堆叠类选择器（和ID选择器）来增加特异性。因此，这条规则的CSS特异性将为0-0-0-2-0。

1142 0

CSS的优先级

CSS 中的优先级也叫做特异性，浏览器使用它来判断在元素上使用何种属性，优先级是基于不同的选择器组合而成的匹配规则。...选择器的优先级下面罗列的选择器，选择器的优先级是递增的： 1、类型选择器(例如：h1)和伪元素选择器(例如：::after) 2、类选择器(例如: .example)，属性选择器(例如：[type=..."checkbox"])和伪类选择器(例如：:hover) 3、ID选择器(例如：#example) 通配符选择器、(*)关系选择器、否定伪类对优先级没有影响，但是在 :not() 内部声明的选择器，...important , 可以这样： 1、更好的利用 CSS 的级联属性 2、使用更具体的规则，或者写出更高优先级的 CSS 规则来代替这是我们的 DOM 结构： <div id="test" class...important 的 CSS 规则，然后再给选择器更高的优先级。或是添加一样选择器，把它的位置放在原有声明的后面 table td { height: 50px !

7761 0

为什么是link-visited-hover-active

前言通常我们在设置链接的一些伪类（link，visited，hover，active）样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。...要想弄明白为什么是这个顺序，首先我们需要知道，CSS在确定应当向一个元素应用哪些样式时，这通常不仅需要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源，这个过程就成为层叠。...一个选择器的具体特殊性如下确定：对于选择器中给定的各个ID属性值，加0,1,0,0。对于选择器中给定的各个类属性值、属性选择或者伪类，加0,0,1,0。...最后，由于可以把伪类链接起来，所以可以不必担心这些问题。...{ color: silver; } 结语通过对链接样式顺序为什么是 link-visited-hover-active 的解答，我希望帮助大家能加深了解CSS在确定应当向一个元素应用哪些样式时的一些基本原理

9765 0

30道CSS 面试知识点总结

CSS（层叠样式表）是一种样式语言，对于 HTML 元素来说足够简单。它在网页设计中非常流行，其应用在XHTML中也很常见。问题2：为什么要开发CSS？...万维网协会维护 CSS规范。问题 7：伪元素是什么意思？伪元素是添加到选择器的关键字，它允许一种样式，即所选元素的特定部分。...CSS 中有四类可以授权选择器的特异性级别：内联样式 ID 类，属性和伪类元素和伪元素问题12：CSS有什么缺点 CSS的缺点有: 版本太多 – 与HTML或Javascript等其他参数相比，CSS...问题 20：如何在CSS中定义一个伪类?它们是用来干什么的 CSS伪类是用来添加一些选择器的特殊效果。...伪类的语法 selector:pseudo-class{property:value;} 问题 21：CSS和SCSS有什么区别？

1.4K2 0

CSS(一)

CSS(Cascading Style Sheets)，它是一种可以完全独立于 HTML 的语言，来确定字体大小，边距和颜色等内容。 为什么要引入另一种语言呢？...处于不同的目的，HTML 设置网页内容，而 CSS 则定义如何向用户显示内容。在具体讲解 CSS 常用样式属性之前，我们将先讲解 CSS 基本语法规则以及级联规则。...link 标签引入外部的 CSS 文件。...p+a { color: red; } * 选取所有元素 * { color: red; } 伪类选择器 E:first-child 选取 E 元素集合中第一个 E 元素。...其中 I 分量表示 ID 选择器个数 C 分量表示 Class 选择器个数 + 属性选择器个数 + 伪类选择器个数 T 分量表示 Type 选择器个数 + 伪元素选择器个数如果特指度相同，后加在到浏览器的规则生效

4403 0

前端入门系列之CSS

它们有两种主要类型：伪类和伪元素。...1）伪类一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类...伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。...你可以看到第三条规则 color 和 padding 被运用了, 但 background-color没有，为什么？实际上，这三种情况都应该应用，因为在源顺序后面的规则通常会覆盖较早的规则。...为什么？因为 !important 在第二条规则中的声明——在 border: none之后写入它意味着尽管id具有更高的优先性，该声明也将优先于前面规则中的边界值声明。不要使用 !

2.6K1 0

聊一聊CSS的过去与未来，加深对CSS的理解

让我们深入了解CSS是如何发展至今的（或者直接滚动到最后一节，展望未来…）。 CSS选择器——样式的不断演变之路 CSS选择器就像标签游戏中的精确指令。它是一条规则，用于识别需要样式化的HTML元素。...它通过更强大的工具扩展了CSS选择器的能力，例如通用兄弟组合器(~)、:not()伪类以及一系列的属性选择器： /* General Sibling Combinator */ h1 ~ p { font-size...我们开始打造复杂的设计，能够根据内容的结构和含义进行响应式布局。 CSS3带来了伪类，如:nth-child、:nth-of-type、:checked，以及伪元素::before和::after。...{ content: "❝"; font-size: 3em; } blockquote::after { content: "❞"; font-size: 3em; } 还值得一提的选择器是伪类...它指的是将不同的样式表结合起来，并解决适用于同一元素的不同CSS规则之间的冲突。这里的特异性概念发挥了关键作用。ID选择器的特异性高于类选择器，类选择器的特异性高于类型选择器。

2025 0

后盾人教程_最专业的后盾

CSS 3 系列课程开课了，老铁快上车吧一引用CSS差别 link标签：外部 style标签：内联 style属性：嵌入式注释：/* */ 结尾：分号，不能省略 css导入其他css...，类似正则表达式 ^：开头包含 $：结尾包含 *：含字符串 ~：含单词 |：字符串开头或者用-连接六伪类选择器选择元素的不同状态或者不确定存在的元素 a:link：a标签元素被点中后...目标：:target伪类，当元素被跳转到后则选中根伪类：:root伪类，根元素空元素：:empty伪类，没有内容的标签七结构伪类选择器首尾元素伪类：:first-child, last-child...important 四元素继承权重子元素继承父级元素的样式规则继承没有权重，是NULL 不是所有规则都可以继承，比如边框五通配符与继承博弈通配符权重是0 0 > NULL 六...预处理器 less sass 带你玩转 CSS 3 文本，打牢前端开发基础一字体 font-family：用逗号分隔多个字体类型 @font-face：定义字体，引入自带字体二字重与字号

9722 0

CSS 样式优先级

CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。例1： <!...{} 伪类选择器，如 :hover{} 伪元素选择器，如 ::before{} 标签选择器，如 span{} 通配选择器，如 *{} CSS 优先规则3：优先级关系：内联样式 > ID 选择器...> 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b）...例5： // HTML ...CSS 还提供了一种可以完全忽略以上规则的方法，当你一定、必须确保某一个特定的属性要显示时，可以使用这个技术。 CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。

4522 0

CSS快速入门（一）

相邻选择器弟弟选择器属性选择器语法示例分组与嵌套伪类选择器语法示例标准伪类索引选择器参考表网站分享 CSS快速入门简介层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术...它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”； css是用来调节标签样式的那为什么需要学选择器呢?...例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。...c1的div标签*/ color: red; } 伪类选择器 CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。...focus状态(聚焦状态)*/ 标准伪类索引 :active :any-link :blank :checked :current (en-US) :default :defined :dir() :disabled

9102 0

9.29【前端开发】超链接伪类：如何在svg元素上使用超链接伪类?

超链接伪类：如何在svg元素上使用超链接伪类?...a:hover{color:#ff7300;} a:active 鼠标单击未释放的超链接样式 a:active {color:#999;} 注意定义的顺序LVHA 这个样式可能会被后声明的其他链接相关的伪类覆盖...，这些伪类包括 (:link, :hover,和:active)。...要适当地设置链接样式，请将:visited 规则放在:link 规则之后，但在:hover 和:active 规则之前。...最佳实践在使用超链接伪类时，按照LVHA的顺序依次定义伪类样式，注意能够使用的样式属性，三个颜色，以及alpha的受限。

1.8K2 0

9.25【前端开发】超链接伪类：如何在svg元素上使用超链接伪类?

超链接伪类：如何在svg元素上使用超链接伪类a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;} a:visited 单击访问后超链接样式 a:visited {color...LVHA 这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 (:link, :hover,和:active)。...要适当地设置链接样式，请将:visited 规则放在:link 规则之后，但在:hover 和:active 规则之前。...">链接1 空链接2 样式限制并不是只能给a链接加这几个伪类，可以给所有元素添加。...但并不是所有的样式可用，只有少量可用允许使用的 CSS 属性为color, background-color, border-color, border-bottom-color, border-left-color

2.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云