了解CSS优先级(以及如何使用!重要)

“ CSS指令无效。为什么?”
“ CSS无效。修复时间太长。”

正确的CSS设置通常不起作用,您是否曾经尝试做过“不起作用”并使设置更加复杂且难以收集的事情?对于初学者来说,这种经验是必须的。但是,我想尽可能避免这种痛苦。因此,在本文中,我将介绍您应该知道的“优先级”概念以及如何使用“!重要”。这些知识将改变您编写CSS的方式,并且您应该能够在出现问题时找出解决方案,并且所需的时间不会比解决该问题所需的时间长。

本文是为CSS初学者编写的。本文不适用于有经验的人。

[对于初学者]仔细解释如何编写CSS(样式表)

CSS无法正常工作的情况

首先,让我们知道CSS指令何时不起作用。除CSS描述错误外,通常有以下几种模式。

  • 由于较长的HTML和复杂的代码,CSS无法使用简单的CSS选择器配置工作,因此,我连接了许多类并配置了选择器来解决问题,但是优先级发生了变化,因此其他CSS已停止工作。
  • 因为我做了多个相同的类名,所以选择器是重复的,并且如果我使用相同的选择器而没有注意到它并发出了另一条指令,则CSS无法正常工作。
  • 当我购买模板并基于它设计模板时(当我修改其他人编写的代码时),设置了详细的选择器设置,并且简单的CSS指令不起作用。

需要注意的是使用“其他人的代码”时的情况。换句话说,复制其他人从“ github”或“ snipet”编写的代码&您可以粘贴和使用它,也可以自定义设计所基于的模板。它可能会重写其他人编写的CSS指令。那时,如果详细描述了其他人的指令(请参见下图。为了使CSS易于使用,类名是连续的并且选择器的描述是详细的),只需进行简单的更改即可。在许多情况下,CSS不起作用。

有人会告诉您,这种定制的一种便捷解决方案是在CSS属性值的末尾添加“!Important”。 “!重要”不应轻易处理。

什么是“!重要”?

有“!Important”作为使CSS指令起作用的一种方式。这是CSS指令的首要工作方式,实际上,它非常有效。 CSS属性中描述了编写方式,如下所示。换句话说,只需将“!重要”放在“;”之前。

.セレクタ{
  プロパティ名: 値!important;
}

让我们尝试看看效果。设置以下html。

<div class="sample">
  <h1>これはサンプルです。</h1>
</div>

接下来,对CSS进行两个不同的设置。在下文中,一种颜色标记“ h1”由“蓝色”指示,另一种颜色标记由“橙色”指示。

.sample h1{
  color: blue;
}

.sample h1{
  color: orange;
}

通常,CSS指令优先于底部。因此,彩色显示将为“橙色”。

现在,让我们使用“!Important”优先显示“ blue”。

.sample h1{
  color: blue!important;
}

.sample h1{
  color: orange;
}

浏览器显示从“橙色”更改为“蓝色”。这样,只需为要优先显示的属性设置“!Important”,它将立即获得优先级。

“!重要”是不得已的方法

尽量少用“!重要”!

首先,我被教给我很多东西,但是过度使用会引起问题。换句话说,如果存在要优先于指定了“!重要”的属性的属性,则也要为其添加“!重要”。如果重复这种情况,则CSS文件将具有更多的“!Important”,并且浏览器会混淆应优先考虑的元素。您可以指定“!重要”的数量没有限制,但是您不应该经常使用它,因为您不知道真正需要什么“!重要”。

“!Important”是一种有效的方法,可以对CSS给出非常有力的指导,但是禁止滥用。将其视为最后的选择。请记住,滥用会导致CSS失败。

首先考虑另一种方法

所以我该怎么做?为了解决这个问题,请了解CSS的“优先级”。有了这些知识,通过将其更改为与“优先级”相符的描述,可以更轻松地解决“ CSS不起作用”的问题。

优先反映CSS

对于CSS中的相同选择器,浏览器有其自己的规则,即在存在相同属性的值的情况下如何确定优先级。在下图中,随着排名下降,优先级也随之下降。除以下内容外,还有一个“用户配置的CSS”。由于它很少首先使用,因此省略了它的解释。

                                

排行 优先 选择器类型 描述
1 在CSS文件中指定媒体类型 (例)”link media=”screen” rel=”stylesheet” href=”/style.css”/@media 屏幕 and (max-width: 768px) style要素内にmedia属性があれば、あるいは、CSSファイル内に@mediaがあれば、最も強く優先されます。
2 作者在HTML文档中编写的CSS (例)style=”width: 50%;”这是一种直接在HTML代码中编写CSS属性的方法。从HTML5开始,通常创建一个CSS文件(外部文件)并一起编写CSS。但是,如果执行此操作,则会优先于外部文件而强烈识别CSS指令。
3 作者在head标签中编写的CSS 实际上,CSS外部文件中有选择器类型,例如“ 3”,但是我认为这种格式很少使用,因此我将省略它。 在头部设置样式标签,并在其中编写CSS。然后,将优先于CSS文件读取它。但是,这种写作风格并不常见。请了解您可以执行此操作。
4 作者的CSS文件(外部文件) ID选择器 (例)#hoge この設定は他のセレクタよりも強い優先度を持っています。
类选择器 (例).hoge{width: 50%;}
伪类 (例).hoge:nth-child(n){color: red;}
伪元素 (例).hoge::before{content: “”}
类型选择器 (例)p{width: 50%;}/article{width: 50%;} タイプセレクタとは、div / li / p / a /などのタグを指します。
全名选择器 * {font-size:16px;}“ *(星号)”表示“各种元素”,通过设置,说明适用于所有元素。
5 浏览器默认CSS 这是每个浏览器的CSS规范集。即使未设置任何内容,也可以设置margin和h标签的字符大小,但这是默认的CSS。例如,由于这种效果,字体大小可能因浏览器而异。

详细程度

详细程度是多少?

现在,除了优先事项外,我们还需要在这里了解``特殊性''的概念。例如,实际上,在很多情况下,元素被组合以提供CSS指令。那样的话,最后,您必须决定哪个优先级更高。那时,详细程度以数字方式显示优先级的强度。

细节是应用CSS声明的权重,并由每种匹配选择器类型的数量决定。如果多个声明的详细程度相同,则CSS中声明的最后一个声明适用于元素。仅当同一元素有多个声明时,细节级别才适用。 报价来源

详细程度是对CSS中设置的选择器的类型和数量的全面计算,并且是类似于书籍或软件版本的数字值,因此您可以定量地判断优先级。

排行 类型 详细数值
1 选择器与! 1.0.0.0.0
2 CSS样式属性 0.1.0.0.0
3 ID选择器 0.0.1.0.0
4 类选择器([电子邮件 protected]@@等)/伪类([电子邮件 protected]@@:悬停/[电子邮件 protected]@@ :: nth-child(n)等)/具有属性选择器的选择器(href属性,attr属性等) 0.0.0.1.0
5 元素选择器(适用于所有指定的元素,例如div / p / a / 文章)/伪元素(带有::之前/ ::之后/ ::首字母等的选择器) 0.0.0.0.1
6 全名选择器 0.0.0.0.0

计算细节

①假设有一个名为“ .side_nav h2”的选择器。这是一个结合了类选择器和元素选择器的选择器。

选择器名称 详细程度 数量 结果
类选择器 0.0.0.1.0 0.0.0.1.0
元素选择器 0.0.0.0.1 0.0.0.0.1

结果,该选择器的详细程度为“ 0.0.0.1.1”。

②“ #header #global_nav> ul >li。菜单项当前菜单项>假设您有一个名为“ a”的选择器。它是几个元素的组合。

选择器名称 详细程度 数量 结果
ID选择器 0.0.1.0.0 0.0.2.0.0
类选择器 0.0.0.1.0 0.0.0.2.0
元素选择器 0.0.0.0.1 0.0.0.0.3

结果为“ 0.0.2.2.3”。

当然,比较①和②时,②具有​​最高优先级。如果您认为它是最新版本,则可以。

它很容易计算,但不仅仅是一个简单的选择器。您见过这样的代码吗?第一印象是选择器很长。 “ Id”和“ class”被多次连接。

在这种情况下很有用特异性计算器是。只要在空格中输入选择器,它就会给您一个数字。

选择器越详细,详细程度越高,优先级越高。但是,这里也有一些警告。

细节程度适中。
这有点含糊,但是如果时间不太长,以后再进行更改会更容易。

如果详细程度相同,则按写作顺序决定
换句话说,浏览器从上到下移动,因此下面的说明将起作用。

将选择器与“!重要”进行比较时,优先级较高的选择器。
如果您经常使用“!重要”,则将开始比较带有“!重要”的选择器。在这种情况下,由细节程度的数值确定。

概要

现在,让我总结一下到目前为止我已经告诉您的内容。

  • “!重要”可以给出超出所有优先级的非常有力的指示。
  • 不得已使用“!Important”,如果CSS不起作用,请考虑您的优先级。
  • 在考虑优先级时,详细信息的计算很有用,并为每个选择器分配一个数值。
  • 数值的解释被视为“版本”,这意味着较新的版本具有较高的数值和较高的详细程度。

撰写本文的人

田中 陽介

田中洋介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。