全美商学院
新闻
新闻

成都网站建设告诉您什么是CSS特异性及其工作原理?

2023
01/28
22:46
全美网络官网
分享

假设您正在与成都网站建设合作建设一个网站并希望所有超链接都是橙色的,以便从页面上的其他文本中脱颖而出。此外,对于内部链接,您不仅要更改字体颜色——您还想将它们加粗以额外强调。

网站设计

为此,您需要添加针对所有链接元素和专门包含您的网站名称的链接元素(这些是您的内部链接)的CSS选择器。但是,当您预览站点的前端时,您看不到内部链接的正确格式。这是怎么回事?

您可能违反了CSS特异性规则之一,因此将不得不回溯您的代码以尝试修复错误。这很痛苦,但很常见。CSS特异性是在CSS和Bootstrap等框架中学习的最困难但最重要的概念之一。

什么是CSS的特殊性?

在CSS中,特异性是基于文档中CSS选择器的类型和顺序的相关性度量。如果一个HTML元素或一组元素被多个CSS选择器作为目标,CSS特异性规则会告诉 Web 浏览器应该应用哪些CSS声明。

在我们查看CSS特异性的不同规则之前,让我们定义每种CSS选择器的特异性级别。下面是“特异性层次结构”,它列出了从最高特异性到最低特异性的选择器类型。

ID 选择器: ID 选择器是最具体的一种选择器。他们根据元素的ID 属性(例如,#my-id)选择元素。

类选择器、属性选择器和伪类选择器:这三种选择器类型具有相同的特异性。

类选择器选择CSS类中的所有元素(例如,.my-class)。

属性选择器选择具有给定属性的所有元素(例如,p[target])。

伪类选择器仅在处于特殊状态时才选择元素,例如已访问或悬停(例如,button:hover)。

类型选择器:这些选择器选择所有具有给定节点名称和语法元素(例如,div)的HTML元素。

通用选择器:通用选择器 ( * ) 对特异性没有影响。

CSS特异性规则

在开始编写CSS之前,您应该了解一些CSS特性规则。

规则 1:应用具有更高特异性的CSS选择器。

如果一个HTML元素被多个选择器定位,那么浏览器将应用具有最高特异性的选择器的CSS规则。

例如,一个段落元素是 ID 选择器和类选择器的目标。因为ID选择器具有更高的特异性,所以属于ID选择器的CSS样式会比类选择器更适用于元素。

让我们看另一个例子:假设您希望整个网站的所有按钮都是蓝色的。您将添加一个类选择器以将按钮类下的所有元素定义为具有蓝色背景色。

但是,如果您希望主页上的订阅按钮是一个例外,以便更加醒目,您可以使用 ID 选择器将 ID 为“主页”的按钮定义为橙色背景色。所有没有 ID “homepage” 的按钮仍将遵循类选择器的CSS规则。

规则 2:如果CSS选择器具有相同的特异性,则应用文档中的最后一条规则。

如果多个选择器应用于同一个HTML元素并且它们具有相同级别的特异性(例如,类选择器和属性选择器),那么浏览器将应用样式表中最后出现的选择器的CSS规则。

以上面的例子为例,假设您有两个按钮声明块,并且都使用按钮类。第二个声明块将适用,因为它是文档中的最后一个声明块。

规则 3:内联CSS具有最高的特异性。

CSS可以用三种方式编写:内联、在HTML文档中的

总的来说,成都网站建设使用CSS特异性决定哪个CSS规则应该被应用到元素上的关键因素。理解这个概念对于编写有效的CSS代码非常重要。

联系我们
欢迎来到全美,免费
获取专业网站建设方案
电话咨询:

18140041855

您还可以预约资深顾问
隐私信息保护中,请放心填写

在线客服

电话咨询

微信咨询

微信号复制成功
18140041855 (苏女士)
打开微信,粘贴添加好友,免费询价吧