让我们了解CSS的优先级(也使用!重要)

“不要在CSS上工作。为什么?”
“CSS不起作用。修复需要太长。”

正确的CSS设置通常无效,如果您尝试“不起作用”,则设置变得更加复杂,并且您没有收藏?这种体验是一种成为初学者的一种方式。然而,这种痛苦就是你想要尽可能避免的。因此,我们将介绍思维方式“优先”,如何在本文中使用“!重要”。借鉴了知识,CSS的写作更改,以及当出现问题时的解决方案是由自己引导的,并且不应超过必要的解决方案。

本文可以为CSS的初学者编写。这不是一个假设有经验的人的文章。

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

CSS无效

首先,让我们知道如何处理CSS指令。除了CSS中的错误之外,通常存在以下模式。

  • 因为HTML是长而复杂的代码,CSS不适用于简单的CSS选择器配置,因此,连接了许多类,并且选择器被配置为解决问题,但优先级已更改,但优先级已更改已经改变了。其他CSSS不再有效。
  • 由于进行了多个相同的类名,因此选择器重复,并且它不知道它,如果发出另一个指令,则CSS不起作用。
  • 根据它购买模板并设计设计(如果您将手添加到其他人编写的代码),并且已设置详细选择器设置,并且简单的CSS指令不起作用。

注意事项是使用“其他”代码“时。换句话说,从“github”或“snipet”中复制由其他人编写的代码&粘贴,或者如果您想使用或自定义设计的模板。您可以由其他人编写的CSS指令重写。那时,如果详细描述了其他人的指令(以下图像参考文章。CSS易于工作,类名是连续的,选择器是详细的),简单只有许多情况下CSS不起作用。

有一个人可以判断“!重要”应该在CSS属性的价值作为方便的解决方案之后解决,以及方便的解决方案,但要小心。 “!重要的”不应容易处理。

什么是“重要”?

有“!重要”作为与CSS指令合作的手段。这是真实的,在上面的CSS指令上工作方式非常有效。写入在CSS属性中描述如下。换句话说,你刚刚在“!”之前的“!重要”。

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

让我们对审判产生影响。配置以下HTML:

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

接下来,在CSS中执行两个不同的设置。在下文中,“H1”的一种颜色规范由“蓝色”和“橙色”表示。

.sample h1{
  color: blue;
}

.sample h1{
  color: orange;
}

通常,CSS指令优先。因此,彩色显示器是“橙色”。

所以让我们优先使用“!重要”来显示“蓝色”。

.sample h1{
  color: blue!important;
}

.sample h1{
  color: orange;
}

浏览器显示从“橙色”变为“蓝色”。通过这种方式,只需为您要优先显示的属性设置“!重要”,它在闪烁中优先。

“!重要”是最后一个方式

“!重要”是最低必要的使用!

我也在第一次教导并经常使用,但如果你使用太多,就会出现问题。换句话说,如果“!重要”的属性比指定的属性更优先,您还将能够“!重要”。当重复这种情况时,CSS文件会增加“!重要”,浏览器将被混淆,应优先考虑哪个元素。虽然“!重要的”指定号码没有限制,但没有必要经常使用,因为您无法理解您真正需要的“!重要”。

“重要”是一种有效的方法,可以对CSS进行非常强烈指示,但禁止滥用。请考虑作为持续的最后一条方式。请记住,滥用可以阻止CSS无法工作的CSS。

首先研究另一种方式

所以我该怎么做?为了解决这个问题,请概述CSS工作的“优先”。如果您有此知识,则通过将“CSS”问题更改为“优先级”的描述来易于解决。

CSS反映的优先级

如果CSS的相同属性具有相同的属性值,则浏览器具有其优先级的自身规则。在下图中,随着排名减少,优先级也将降低。此外,除了以下之外,还有一个“用户设置的CSS”。这是因为没有机会使用,所以它将被省略和解释。

                                

排行 优先事项 选择器类型 描述
1 在CSS文件中指定媒体类型 (例子)”link media=”screen” rel=”stylesheet” href=”/style.css”/ @媒体屏幕和(max-width:768px)如果样式元素中有媒体属性,或者@media在CSS文件中,最强烈优先。
2 作者写在HTML文档中的CSS (例子)style=”width: 50%;”直接,它是一种直接在HTML代码中描述CSS属性的方法。 HTML5创建CSS完整(外部文件),通常写入CSS。但是,如果您这样做,CSS指令将在外部文件之前强烈识别。
3 作者在头标记中写入的CSS 实际上,有一种选择器类型为“3”,如在CSS外部文件中,但我认为几乎不使用这种格式,所以省略它。 在头部设置样式标记并在其中写入CSS。然后,它将在CSS文件之前加载。但是,这种写作并不常见。请明白这发生了。
4 Creator的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 浏览器默认CS 这是针对每个浏览器指定的CSS。即使您没有设置任何内容,您可能有边距或H标记字符的大小,但这是默认的CSS。例如,角色的大小与浏览器不同,但这是由于这种效果。

细节程度

什么是细节程度?

嗯,除了优先考虑之外,你需要了解“特异性”的想法。例如,实际上,应该有频繁的情况结合元素来指示CSS指令。在这种情况下,毕竟,优先事项必须确定哪个更强。那时,它是数字上表明优先级强度的详细程度。

当应用CSS声明时,细节是权重,并且由匹配选择器类型的数量标识。如果多个声明是相同的级别,则CSS中的最后一个声明为元素。只有在对同一元素执行多个声明时,才会应用。 报价来源

详细资料综合地计算了CSS中设置的选择器的类型和数量,并且可以具有作为版本或软件版本的数字,并且可以定量地确定优先级。

排行 类型 价值
1 importnat选择器 1.0.0.0.0
2 CSS在样式属性中 0.1.0.0.0
3 ID选择器 0.0.1.0.0
4 类选择器([电子邮件 protected]@ @ etc)/ pseudo class([电子邮件 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

详细的计算程度

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

选择器名称 细节程度 数字 结果
类选择器 0.0.0.1.0 1つ 0.0.0.1.0
元素选择器 0.0.0.0.1 1つ 0.0.0.0.1

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

2“#header#global_nav> ul >Li.Menu-itemt.current-Menu-item>一个名为“A”的选择器。这与一些因素相结合。

选择器名称 细节程度 数字 结果
ID选择器 0.0.1.0.0 2つ 0.0.2.0.0
类选择器 0.0.0.1.0 2つ 0.0.0.2.0
元素选择器 0.0.0.0.1 3つ 0.0.0.0.3

结果是“0.0.2.3”。

当比较1和2时,当然,优先级很高。如果您考虑了最新版本的版本,则可以。

这是非常计算的,但这不仅仅是一个简单的选择器。你见过以下代码吗?第一印象是选择器长度很长。 “ID”和“类”多次连接。

它对此很有用特异性计算器是。只需在空间中输入选择器并提供数字值。

当您详细编写选择器时,细节越高,优先级将增加。但是,这里还有警告。

细节的程度如此之好。
这是一个略有模糊的表达,但很容易改变而不是长期更换。

如果细节程度相同,则取决于书面订单
换句话说,浏览器将从顶部移动到底部,因此它将在下面工作,您将在下面工作。

相比,选择器与“!重要”,更优选细节度的值高。
当使用“重要”时,选择器之间的比较“!重要”开始开始。在这种情况下,它取决于细节级别的值。

概括

所以,我们将总结到目前为止收到的内容。

  • “!重要”可以发出超出所有优先事项的非常强烈的迹象。
  • 使用“!重要”是最后一个方法,如果CSS不起作用,请考虑优先级。
  • 在考虑优先级时,详细程度的计算是有用的,并且为每个选择器分配数值。
  • 数值解释意味着“版本”,这意味着版本的数量很高,细节很高。

给这篇文章的人

田中 陽介

Yosuke Tanaka.

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。