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:
,

---

usw.

Das folgende Beispiel dient der Änderung von

---

.

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 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

und der zweite Typ="EMAIL" ändern den weiterhin normal. Achten Sie daher bei der Verwendung von Attributselektoren auf die Groß- und Kleinschreibung.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn