Mehrere CSS-Black-Technologien

Die schwarze Technologie hier sind eigentlich einige Eigenschaften in CSS, die nicht bekannt sind, aber bei der Lösung bestimmter Probleme sehr nützlich sind.

Grenzradius

Viele Entwickler kennen diesen Grenzradius wahrscheinlich nicht richtig, weil ihn im Grunde viele Leute so verwenden:

.box {
  border-radius: 4px;
}

Etwas High-End Ein bisschen ist so:

.box {
  border-radius: 4px 6px 6px 4px;
}

Die ultimative schwarze Technologie wird jedoch so verwendet:

.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

Ja, sie kann 8 Werte zuweisen, noch nie gesehen? Keine Sorge, die genaue Erklärung lautet wie folgt:

Die Zahl vor dem Schrägstrich beeinflusst die horizontale Richtung und die Zahl hinter dem Schrägstrich beeinflusst die vertikale Richtung. Jede Zahl repräsentiert vier verschiedene Richtungen.

outline-offset

Ich glaube, dass viele Entwickler beim Schreiben von CSS mit der folgenden Anweisung vertraut sein werden:

input {
    outline : none;
}
input:focus {
    outline : none;
}

Dies ist die Anleitung für das Eingabeeingabefeld Entfernen Sie den standardmäßigen blauen Linienrahmen. Tatsächlich ist hier noch zu erwähnen, dass es in CSS ein Outline-Offset-Attribut gibt. In diesem Attribut können Sie die Größe des Attributwerts wie folgt anpassen:

input {
    outline-offset: 4px ;
}

Sie können die Abstandsänderung des Umrisses sehen.

Klassendeklaration

Jeder kennt vielleicht die folgende Klassendeklaration:

.col-8 {
}

Natürlich ist das nichts, aber was wäre, wenn Sie es so schreiben:

.♥ {
  color: hotpink;
}
.★ {
  color: yellow;
}

Nun, wie sieht es aus, Sie können es so verwenden:

<div class="♥ ★"></div>

Solange es Unicode ist, können Sie Ihre Klasse so deklarieren.

Wählen Sie mehrere aufeinanderfolgende Elemente aus

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

Mit der obigen Schreibmethode können Sie tatsächlich das siebte bis vierzehnte li-Element unter ol auswählen.

Pseudoklasse setzt einzelnes Tag

Es gibt mehrere gängige einzelne Tags in HTML: 0c6dc11e160d3b678d68754cc175188a, f32b48428a809b51f04d3228cdf461fa usw.

Das folgende Beispiel dient der Änderung von f32b48428a809b51f04d3228cdf461fa.

hr:before {
    content: "♪♪";
}
hr:after {
    content: " This is an <hr> element";
}

Ja, der Schlüssel liegt in der Verwendung der beiden Pseudoklassen: before und :after. Hier können Sie übrigens tatsächlich diese beiden Pseudoklassen verwenden, um e8e496c15ba93d81f6ea4fe5f55a2244 zu ändern, aber die Voraussetzung ist, dass Sie die Anzeigeattribute dieser beiden auf Folgendes setzen:

display: block

Attribute unterscheiden zwischen Groß- und Kleinschreibung

Wenn wir beim Schreiben von HTML Code ähnlich dem folgenden haben:

<div class="box"></div>
<input type="email">

Dann verwenden wir den Attributselektor für die CSS-Änderung:

div[class="box"] {
  color: blue;
}
input[type="email"] {
  border: solid 1px red;
}

Eine solche Aussage wird zweifellos wirksam sein. Wenn wir es jedoch so deklarieren, wie sieht das Ergebnis aus:

div[class="box"] {
  color: blue;
}
input[type="email"] {
  border: solid 1px red;
}

Nachdem dies in Großbuchstaben umgewandelt wurde, hat die erste Klasse="BOX" keinen Einfluss auf die f9bfd434f855cb7391dc997b9996352a und der zweite Typ="EMAIL" ändern den e8dc7451c84937575e38c52150e3cc83 weiterhin normal. Achten Sie daher bei der Verwendung von Attributselektoren auf die Groß- und Kleinschreibung.