Heim > Artikel > Web-Frontend > Die zugrunde liegenden Regeln der CSS-Prioritätsberechnung

Die zugrunde liegenden Regeln der CSS-Prioritätsberechnung

php中世界最好的语言Original: 2018-03-21 16:53:241609Durchsuche

Dieses Mal werde ich Ihnen die zugrunde liegenden Regeln der CSS-Prioritätsberechnung und die Hinweise der zugrunde liegenden Regeln der CSS-Prioritätsberechnung vorstellen. Das Folgende ist ein praktischer Fall. Werfen wir einen Blick darauf.

Vor kurzem habe ich die Regeln der CSS-Prioritätsberechnung gelernt. Hier gibt es viele Wissenspunkte, die sehr wichtig sind, daher werde ich heute ein paar Anmerkungen hinzufügen.

Das Gewicht von CSS

1. Wie man CSS einführt

1 Knotenelement Ein, verwenden Sie das Stilattribut

2. Führen Sie externe Dateien über den Link

ein. Führen Sie

in die Seite ein. Der Unterschied zwischen den drei Einführungen Methoden

index.html-Datei

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="body.css">
        <style type="text/css">
            body {
                background: red;
            }
        </style>
    </head>
    <body style="background: yellow;">
    </body>
    </html>

body.css-Datei

    body {
        background: green;
    }

1. Die erste Methode hat eine höhere Priorität als die beiden letzteren und hat nichts damit zu tun Bestimmen Sie die Reihenfolge der Einleitung, unabhängig von den Link- und Stil-Tags. Ob im Kopf, im Text oder am Ende des HTML-Tags platziert, die Seite wird gelb angezeigt

2. Der zweite und dritte Typ sind horizontale Einführungen und werden später eingeführt. Der Stil überschreibt den zuvor eingeführten Stil und entfernt das Stil-Tag im Textkörper.

Passt die Reihenfolge der Link- und Stil-Tags an. Der Link befindet sich vorne, das Style-Tag befindet sich hinten und die Seite wird rot angezeigt. Im Gegenteil, die Seite wird grün angezeigt

2. So erhalten Sie Knoten

1.id

2.class

3. Tag

4 Der ID-Wert sollte auf einer Seite eindeutig sein. Wenn jedoch mehrere identische IDs angezeigt werden, ist der Stil für alle ID-Knoten gültig. Die Verwendungsmethode lautet: # gefolgt vom Knoten-ID-Wert

id

. Die Ergebnisse zeigen, dass der Text in beiden Absätzen rot angezeigt wird als „id“, „class“ und „label“. das höchste Gewicht

2. Durch Link und Stil Wenn ein Tag einen Stil für dieselbe ID festlegt, überschreibt der später eingeführte Stil den vorherigen Stil

<body>
  <p id="id_p">第一个段落</p>
  <p id="id_p">第二个段落</p>
</body>

#id_p {
  color: red;
}

Verwenden Die Klasse kann Stile für mehrere Knoten gleichzeitig festlegen und Klassen können überlagert werden. Anleitung. Gefolgt von einem einzelnen Klassennamen des Knotens

Zu diesem Zeitpunkt erscheint der erste Absatz rot und der zweite Absatz grünclass

HTML anpassen

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p class-p-2">第二个段落</p>
</body>

Nachdem die Positionen von Klasse-p und Klasse-p-2 angepasst wurden, bleibt der Seitenrenderingeffekt unverändert. Hinweis: Die Darstellung von Klassenstilen hat nichts mit der Reihenfolge der Klassenverwendung zu tun, sondern hängt mit der Reihenfolge der Klassenstileinstellungen zusammen. Bei Klassenstilen mit derselben Gewichtung überschreiben in den Stileinstellungen die späteren Stileinstellungen den vorherigen Stil Einstellungen

.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}

Sie können den Knoten auch über die Attribute auf dem Knoten formatieren lassen

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p-2 class-p">第二个段落</p><!-- 调换class-p 和 class-p-2 的顺序  -->
</body>

Der zweite Absatz hat ein Titelattribut , sodass der zweite Absatz rot dargestellt wird属性

<body>
  <p>第一个段落</p>
  <p title="第二个段落的title">第二个段落</p>
</body>

Knoten nach Tag-Namen für die Stileinstellung abrufen

[title] {
  color: red;
}

Alle p-Tag-Knoten auf der Seite werden rot gerendert标签

Mischen

<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
</body>

p {
  color: red;
}

Die oben genannten vier Methoden können gemischt und zum Stylen der entsprechenden Knoten verwendet werden. Zu den Kombinationsmethoden gehören hierarchische Verschachtelung, Stilüberlagerung, Knotenzuordnung usw. Am Ende wird dasjenige mit dem höchsten Gewicht das Endergebnis sein.

3. Stilgewichtung

Für die oben genannten vier Methoden ist die ID die höchste und die Klasse und das Attribut liegen auf derselben Ebene (die spätere Stile überschreiben die vorherigen Stile).

Wenn die vier Methoden gemischt werden, hat das gewichtete Ergebnis Vorrang. Sortieren Sie die IDs, Klassen, Attribute und Beschriftungsstile, die auf demselben Knoten vorhanden sind, und der zuerst eingestufte ist der endgültige Rendering-Effekt. Beispiel: Es gibt mehrere Arten von Stileinstellungen für Knoten p. Wählen Sie zunächst alle Stile mit IDs aus, einschließlich verschachtelter Stile. Sortieren Sie unter derselben ID einen anderen Stiltyp

Obwohl beide Stileinstellungen IDs haben und der grüne Effekt nach Rot gesetzt wird, kann durch Sortieren derselbe #id_p wie der vorherige erhalten werden einer existiert.körper, daher ist der endgültige Rendering-Effekt rot

存在class、属性和标签的样式时，依次排序，同类型或同权重（class和属性同权重）的样式，靠后的样式覆盖之前的样式（以类型为准，不以名称为准），最终排位第一者为最终呈现效果。

注意：

1.嵌套、叠加、>、 +等方式，不会影响最终效果。

2.:nth-child、:first-child、:last-child等伪类高于class和属性

四、!important

!important为样式中的特例，它的权重为最高，高于id、class、属性、标签以及style属性

<body class="body" style="background: red"></body>

.body {
  background: green !important;
}

页面呈现效果为green。但是当对样式设置进行排序时，仍然是同类型样式下，以另一类型权重高者为最终效果。例如

body.body {
  background: blue !important;
}
.body {
  background: green !important;
}

相同class及!important下，前一种样式设置存在body标签，后一种则没有，所以最终效果呈现blue

说明

1.尽量避免使用!important。因为!important权重最高，会对节点的该属性做强制性设置，在使用时要慎重

2.使用场景

引入插件时，对插件中的样式进行强覆盖。当引入插件时，在不想修改插件中的样式代码情况下，可通过!important对插件内的样式属性进行强制复写
对行内样式进行强覆盖。对于自动生成或者动态引入的的带有行内样式html结构时，可以通过!important对行内样式进行强制复写

1.变通

!important在很多时候是不建议使用的，在stylelint中有一项规则即禁止使用!important。有一种变通的方式，可以在多数情况下实现类似!important`的效果

html <body class="body"> <p class="p"> <span class="span">一段文本</span> </p> </body>

css .body .p .span { color: red; } .span.span.span.span.span {/** 自身样式叠加 **/ color: green; }

在不考虑行内样式和id的情况下，对自身样式进行重复叠加多次使用，可以增加class权重，对样式进行复写。

使用前提：

1.没有行内样式style属性

2.没有id样式

3.自身样式叠加次数多余嵌套个数

好处：不用考虑DOM层级关系，减少层级嵌套

五、总结

综合以上说明，权重的计算基本遵从以下规则：

1.按类型比对，类型权重高者显示；

2.同类型，按数量比对，多者显示；

3.同数量，按先后顺序比对，后者显示

嵌套的使用建议

样式嵌套使用，除了增加权重外，也体现了DOM的某种结构关系。但嵌套并不是在任何情况下都需要的。

嵌套多用于块内独有的样式设置。某种样式仅在某个块内有效，可使用嵌套。
多个页面同时开发时，为避免合并后样式被覆盖，可使用嵌套。

嵌套的使用并不是越多越好。嵌套越多，权重越大，但同时对页面的性能消耗也越大。建议使用继承和样式叠加。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen